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图 1-4: 一 个 3D 网 格 ， 遵 循 知识 共享 署名 - 相同 方式 共享 3.0 未 本 地 化 版 本 协议 使 用 








图 1-5: 3D 变换 一 一 平和 欧 、 旋 转 和 缩放 
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图 1-6: 一 个 4x4 变换 矩阵 (http://www.songho.ca/opengl/gl_transform.html) ;经 许可 进行 了 修改 








视 口 〈 近 剪裁 平面 ) 











图 1-7: 相机 、 视 口 和 透视 (http;//obviam.net/index.php/3d-programming-with-android-projections- 
perspective/) ;经 许可 进行 了 修改 














图 4-2: Three.js 中 基于 样 条 的 挤 出 
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4-3: Three.js 实现 基于 路 径 的 挤 出 形状 
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图 4-8: Three.js 标准 网 格 材 质 类 型 一 一 Basic (unlit)、Phong 和 Lambert 
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4-9: 思 凸 贴 
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图 4-12: 定向 光 、 点 光源 、 聚 光 灯 和 环境 光 




















4-16: 使 用 延迟 泻 染 的 逐 像素 光线 处 理 














图 5-1: Ellie Goulding's Lights 一 一 一 个 用 程序 动画 创建 的 音乐 可 视 化 项 目 ， 图 片 由 Hello Enjoy 提供 




















图 5-2: 线性 插值 ， 转 载 已 被 许可 














5-6: 一 个 B 样 条 曲线 ,由 Wojciech mula 提供 (遵循 知识 共享 CC0 1.0 通用 公共 领域 贡献 协议 使 用 ) 




















图 5-8: 样 条 动画 的 坐标 帧 ; 切线 、 法 向 量 和 副 法 线 分 别 用 蓝 色 (向 前 )、 绿色 (向 上 ) 和 红色 (向 右 ) 
箭头 来 表示 ; 图 片 由 Cedric Bazillou 提供 ， 经 许可 进行 了 修改 
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6-8: 使 用 CSS 过 渡 来 进行 属性 动画 
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7-2: Canvas API 的 功能 
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11-5: 预览 工具 显示 场景 中 所 有 对 象 的 边界 框 
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发 的 全 过 程 。 





本 书 全 面 讲解 了 使 用 HTML5 和 WebGL 开发 3D 应 用 的 Web 技术 ， 理 论 与 实践 相 结 合 ， 涵 
盖 桌 面 和 移动 两 端 。 全 书 分 两 部 分 : 基础 知识 和 应 用 开发 。 在 详细 介绍 开发 相关 理论 、 工 具 、 框 
架 和 库 的 基础 上 ， 作 者 通过 3D 产品 浏览 器 、 游 戏 和 交互 培训 系统 等 案例 ， 生 动 讲解 了 3D 应 用 开 
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在 其 大 约 二 十 年 的 历史 中 ，Web 3D 技术 的 发 展 过 程 历经 曲折 。1994 年 ，VRML 曾 被 视 为 
令 业 界 瞩 目的 新 星 ， 但 它 最 终 在 第 一 次 互联 网 泡沫 中 发 展 成 了 背离 主流 Web 开发 技术 的 
怪 胎 。2000 年 左右 ，Shockwave 3D 作为 新 一 代 备 受热 捧 的 技术 ， 曾 试图 引导 游戏 开发 界 
的 改革 。 然 而 到 了 2004 年 ， 这 项 技术 也 同样 被 抛弃 了 。2007 年 ， 虚 拟 现实 系统 “第 二 人 
生 ”(Second Life) 超越 科技 媒体 的 范畴 登 上 了 《商业 周刊 》 的 封面 ， 从 而 掀起 了 一 场 新 的 
“3D 土地 掠夺 ”运动 一 一 正如 字面 上 的 意思 那样 ， 蜂 拥 而 来 的 人 们 租赁 “第 二 人 生 ” 中 的 
岛屿 ， 试 图 在 网 络 世 界 中 创造 虚幻 的 殖民 地 。 而 到 了 2010 年 ， 虚 拟 世 界 对 人 们 来 说 已 经 
不 再 新 鲜 ， 消费 者 们 更 多 地 依赖 社交 游戏 和 手机 游戏 来 满足 他 们 的 消 道 娱 乐 需求 。 一 方 
面 ， 这 可 以 说 是 一 连 串 的 失败 ， 但 从 另 一 方面 来 说 ， 这 也 是 对 Web 3D 技术 的 一 系列 锤炼 。 
一 个 好 的 想法 可 能 需要 耗费 很 长 的 时 间 来 实现 ， 但 它 绝 不 会 彻底 消亡 。 在 Web 上 实现 3D 
的 概念 也 是 如 此 。 当 你 回顾 历史 包括 但 不 仅仅 指 那 些 早期 的 尝试 ， 就 能 得 出 我 们 中 的 
一 些 人 ( 绝 无 骄 傲 之 意 ) 一 直 都 知晓 的 理念 : 3D 只 是 一 种 媒体 形式 。 无 论 你 是 用 它 来 创 
建 大 型 多 人 在 线 游戏 ， 还 是 一 个 可 交互 的 化 学 课件 ， 或 者 是 其 他 类 型 的 应 用 ，3D 只 是 让 
像素 随 着 用 户 指示 运动 的 另 一 种 方式 。 所 幸 新 一 代 的 浏览 器 开发 者 们 终于 意识 到 了 这 一 
点 ， 并 逐渐 将 Web 浏览 器 往 富 媒体 开发 平台 的 方向 推进 ， 包 括 实现 了 一 流 的 硬件 加 速 的 图 
形 泻 染 和 一 体 化 的 图 像 合成 架构 。 简 而 言 之 ，3D 来 了 ， 请 习惯 它 。 

本 书 将 介绍 创建 桌面 和 移动 设备 浏览 器 端 产 品级 3D 应 用 所 需 的 相关 信息 ， 其 中 会 使 用 
现代 浏览 器 中 已 经 支持 的 一 些 技 术 : WebGL、Canvas 和 CSS3。 本 书 涵盖 的 话题 包括 
JavaScript 性 能 、 移 动 端 开发 以 及 高 性 能 Web 设计 ， 并 深入 讲解 了 一 些 能 够 提高 生产 效率 
的 工具 和 库 : Three.js、Tween.js、 新 的 应 用 框架 以 及 其 他 创建 3D 内 容 的 可 选 工 具 。 
我 的 第 一 本 书 《WebGL 入 门 指南 》(WebGL Up and Running，http://shop.oreilly.com/product/ 
0636920024729.do) 的 读者 会 发 现 ， 本 书 的 前 儿童 和 上 一 本 书 的 内 容 有 不 少 重合 ， 这 是 
不 可 避免 的 。 前 儿童 的 许多 内 容 都 是 为 了 概述 和 3 引导， 如 果 没 有 这 几 章 的 话 ， 或 许 为 了 
读 懂 本 书 你 还 得 先 读 完 我 的 上 一 本 书 。 不 管 怎么 说 ， 尽 管 前 儿童 看 起 来 和 上 一 本 书 很 类 
似 ， 但 上 一 本 书 的 读者 还 是 能 从 这 儿 章 中 获取 到 一 些 在 上 一 本 书 中 没有 提 及 的 信息 。 就 算 
是 介绍 性 章节 ， 也 比 第 一 本 书 更 为 深入 。 而 前 三 章 之 后 的 内 容 ， 会 和 第 一 本 书 完全 不 同 。 
《WebGL 入 门 指南 》 旨 在 为 读者 提供 一 项 也 许 有 点 令 人 旦 惧 的 新 技术 的 入 门 介 绍 。 在 我 看 
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来 ， 它 或 多 或 少 缺 乏 技 术 上 的 严谨 性 ， 它 的 作用 在 于 点 燃 读者 对 学 习 这 门 新 技术 的 热情 。 
如 果 你 在 读 完 《WebGL 入 门 指南 》 之 后 ， 产 生 了 学 习 这 门 技 术 的 兴趣 ， 那 么 我 的 目的 就 
达到 了 。 而 本 书 的 目的 在 于 从 理论 和 实践 两 方面 为 读者 提供 更 深入 的 内 容 ， 以 实现 从 具备 
一 些 实践 经 验 到 真正 创建 产品 级 3D 应 用 的 过 渡 。 


目标 读者 


本 书面 向 尝试 转向 3D 开发 的 有 Web 开发 经 验 的 开发 者 ， 要 求 读者 熟悉 HTML、CSS 和 
JavaScript， 并 至 少 熟悉 jQuery。3D 图 形 或 动画 方面 的 经 验 会 对 阅读 本 书 很 有 帮助 ， 但 你 
并 不 一 定 要 事先 具备 这 方面 的 基础 。 本 书 会 提供 3D 方面 的 入 门 知 识 ， 并 会 解释 书 中 会 用 
到 的 基本 概念 。 


组 织 结构 

本 书 分 为 两 个 部 分 。 

第 一 部 分 ， 基 础 知识 ， 探 讨 3D 图 形 开发 相关 的 底层 HTML5 API 和 技术 ， 包 括 WebGL、 

Canvas 和 CSS3。 

。 第 1 章 介 绍 3D 应 用 开发 和 3D 图 形 的 核心 概念 。 

。 第 2 章 到 第 5 章 深 入 探讨 基于 WebGL 的 编程 ， 涵 盖 核 心 API 以 及 Three.js 和 
Tween.js 这 两 个 图 形 和 动画 开发 的 常用 开源 库 。 

。 第 6 章 研 究 CSS3 中 用 于 创建 3D 页 面 特效 和 界面 的 新 特性 。 

。 第 7 章 讲述 2D Canvas API， 以 及 如 何在 稍 低 端的 平台 上 用 它 来 模拟 3D 效果 。 

第 二 部 分 ， 应 用 开发 技术 。 进 入 开发 实战 主题 ， 包 括 3D 内 容 的 构建 、 使 用 应 用 框架 构建 

程序 ， 以 及 将 应 用 部 署 到 HTML5 移动 平台 。 

。 第 8 章 涵盖 3D 内 容 的 各 种 构建 方式 ， 包括 设计 师 用 于 构建 3D 模型 和 动画 的 工具 
和 文件 格式 。 

。 第 9 章 着 重 介绍 如 何 使 用 开发 框架 来 提升 应 用 开发 效率 ， 并 着 重 介 绍 了 Vizi 
个 用 于 开发 可 复 用 3D 组 件 的 开源 框架 。 

。 第 10 章 和 第 11 章 深入 介绍 了 几 种 类 型 的 3D 应 用 的 开发 ， 从 通过 一 个 可 交互 物体 
来 控制 动画 和 互动 的 简单 应 用 ， 到 带 精确 导航 和 各 种 交互 对 象 的 复杂 3D 环境 。 

。 第 12 章 探讨 了 在 新 一 代 支 持 HITML5 的 移动 设备 和 操作 系统 中 开发 3D 应 用 的 相关 话题 。 


排版 约定 
本 书 使 用 了 下 列 排版 约定 。 


。 楷体 
表示 新 术语 。 
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Xii 且 后 


。 等 宽 字体 (constant width ) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变量 、 
语句 和 关键 字 等 。 
。 加 粗 等 宽 字 体 (constant width bold) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 
。 和 斜体 等 宽 字 体 (constant width bold) 
表示 占 位 符 ， 其 内 容 应 当 被 用 户 自 定义 的 值 或 上 下 文 决定 的 值 所 替换 。 





该 图 标 表 示 一 般 注 记 。 





本 书 的 示例 文件 

你 可 以 从 GitHub 上 下 载 本 书 的 所 有 示例 代码 ， 网 址 是 : 
https://github.com/tparisi/Programming3DApplications 

注意 ， 你 得 通过 一 个 web 服务 器 来 访问 本 书 的 大 部 分 示例 ， 而 非 直 接 使 用 file URL 在 
桌面 上 打开 它们 。 这 是 由 于 JavaScript 代码 中 加 载 了 一 些 额 外 的 资源 文件 ， 例 如 JPEG 或 
PNG 格式 的 图 片 文件 ， 由 于 WebGL 安全 模型 中 的 跨 域 访问 安全 限制 ， 这 些 资 源 文 件 必须 
通过 HITP 从 Web 服务 器 传输 到 浏览 器 端 。 

我 在 MacBook 上 运行 了 一 个 标准 本 地 版 LAMP 环境 ， 不 过 你 需要 用 到 的 仅仅 是 LAMP 的 
一 部 分 功能 一 一 像 Apache 这 样 的 Web 服务 器 。 或 者 如 果 你 的 机 器 上 装 了 Python， 你 也 可 
以 利用 Python 内 置 的 SimpleHTTPServer 模块 来 启动 一 个 Web 服务 器 ， 使 用 命令 行 窗口 定 
位 到 examples 目录 ， 然 后 输入 : 


python -m SimpLeHTTPServer 





























这 样 你 就 可 以 通过 http://localhost:8000/ 这 个 地 址 来 访问 本 书 的 示例 了 。 如 果 希 望 获取 更 多 
关于 这 方面 的 技术 支持 ， 请 访问 Linux Journal 网 站 (http://www.linuxjournal.com/content/ 
tech-tip-really-simple-http-server-python ) 。 

示例 文件 提供 了 本 书 中 创建 的 全 部 应 用 的 完整 版 本 ， 包 含 运行 它们 所 需 的 所 有 文件 。 在 某 
些 示 例 中 ， 你 需要 先 下 载 一 些 额 外 的 资源 ， 例 如 3D 模型 资源 ， 才 能 正确 地 运行 它们 。 具 
体 请 查阅 示例 根 目录 中 的 README 文件 。 











注意 ， 本 书 中 包含 的 许多 资源 受到 版 权限 制 。 它 们 的 创作 者 授权 我 将 其 作为 
本 书 编程 示例 支持 ， 但 仅 可 用 于 这 一 用 途 。 如 果 你 希望 将 这 些 代码 用 于 其 他 
目的 ， 尤 其 是 在 你 的 应 用 中 使 用 这 些 代码 ， 那 么 你 需要 自行 获取 这 些 资 源 的 
许可 ， 对 于 某 些 资源 ， 你 可 能 需要 付费 购买 其 许可 证 。 


























使 用 示例 代码 


本 书 是 要 帮 你 完成 工作 的 。 一 般 来 说 ， 如 果 本 书 提 供 了 示例 代码 ， 你 可 以 把 它 用 在 你 的 程 
序 或 文档 中 。 除 非 你 使 用 了 很 大 一 部 分 代码 ， 否 则 无 需 联系 我 们 获得 许可 。 比 如 ， 用 本 书 
的 几 个 代码 片段 写 一 个 程序 就 无 需 获 得 许可 ， 销 售 或 分 发 O"Reilly 图 书 的 示例 光盘 则 需要 
获得 许可 ;引用 本 书 中 的 示例 代码 回答 问题 无 需 获得 许可 ， 将 书 中 大 量 的 代码 放 到 你 的 产 
品 文档 中 则 需要 获得 许可 。 

我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包 括 书 名 、 
作者 、 出 版 社 和 ISBN。 比 如 :“Programming 3D Applications with HTML and WebGL by 
Tony Parisi (O’Reilly). Copyright 2014 Tony Parisi, 978-1-449-36296-6.” 


如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范围 ， 欢 迎 你 通过 permissions@ 
oreilly.com 与 我 们 联系 。 




































































Safari2 Books Online 


Safari Books Online (http://www.safaribooksonline.com) 是 应 运 而 

Sa fa 【DL 生 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 技术 

Books Online 和 商务 作家 的 专业 作品 。 技 术 专 家 、 软 件 开 发 人 员 、Web 设计 

师 、 商 务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问题 、 学 习 和 认证 培训 时 ， 都 将 Safari 
Books Online 视 作 获取 资料 的 首选 渠道 。 


对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O'Reilly Media、Prentice 
Hall Professional、 Addison-Wesley Professional、 Microsoft Press、Sams、Que、Peachpit 






































Press、 Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
Redbooks、 Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、 
Jones & Bartlett、Course Technology 以 及 其 他 儿 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 下 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 


美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 

中 国 : 


北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 菜 利 技术 咨询 (北京) 有 限 公 司 




















O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 
http://oreil.ly/program-3d-apps-html5-webGL 
对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 : bookquestions@oreilly.com 
要 了 解 更 多 O’Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 
http://www.oreilly.com 


我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 
请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 




















我 们 的 YouTube 视频 地 址 如 下 : http:/www.youtube.com/oreillymedia 
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Dl 


第 一 部 分 





基础 知识 





我 们 生活 在 3D 世界 中 。 人 们 的 运动 、 思 芳和 感受 都 是 3D 的 。 


大 多 数 媒 体 是 3D 的 ， 尽 管 它 们 通常 被 展示 在 平面 屏 莫 上。 计算机 生成 的 3D 图 像 组 成 了 
动画 电影 ， 在 线 地 图 服务 使 我 们 能 够 在 虚拟 的 3D 环境 中 探索 目的 地 ， 大 多 数 电 子 游 戏 ， 
不 管 是 运行 在 专用 游戏 机 上 还 是 手机 上 ， 都 是 用 3D 泻 染 的 ， 就 连 新 闻 都 3D 化 了 : 为 了 
在 24 小 时 滚动 播 出 的 新 闻 中 吸引 眼球 ， 几 年 前 美国 有 线 电 视 新 闻 (CNN) 的 一 位 分 析 师 
在 虚拟 场景 中 手舞足蹈 的 请 稽 场面 ， 如 今 在 有 线 频 道 的 播 出 中 已 经 司空 见 惯 。 


计算 机 3D 图 形 的 历史 可 以 追溯 到 20 世纪 60 年 代 ， 几 乎 和 计算 机 本 身 的 历史 一 样 长 。 它 
被 广泛 应 用 于 工程 、 教 育 、 培 训 、 建 筑 、 人 金融、 销售、 市场、 博彩 、 娱 乐 等 各 个 领域 。 曾 
经 ，3D 图 像 只 能 用 高 端 计算 机 系统 搭配 昂贵 的 软件 来 这 染 ， 而 过 去 十 年 中 ， 这 种 情况 已 
然 改 变 。 如 今 ， 所 有 的 计算 机 和 移动 设备 都 搭载 了 3D 图 形 处 理 硬 件 ， 普 通 智能 手机 甚至 
有 着 比 十 五 年 前 的 专业 图 形 工作 站 更 为 优秀 的 图 形 处 理 能 力 。 更 重要 的 是 现代 Web 浏览 器 
也 支持 了 3D 浑 染 ， 相 比 过 去 昂贵 的 3D 专用 演 染 软件 ， 浏 览 器 显然 更 普遍 ， 更 易于 获取 ， 
并 且 还 是 免费 的 。 


图 1-1 展示 了 一 个 名 为 “100 000 Stars” 的 、 基 于 浏览 器 开发 运行 的 3D 银河 系 飞 行 模拟 程 
序 的 局 部 。 你 可 以 用 鼠标 绕 银 道 面 "旋转 整个 星系 , 以 及 放大 观看 你 所 感 兴趣 的 星体 。 每 颗 
星星 都 根据 其 视 星 等 ”和 颜色 来 演 染 , 并 用 标签 注 明 其 通用 名 。 当 鼠标 移 到 标签 上 时 , 标签 
高 亮 显 示 。 点 击 任意 标签 显示 浮 层 ， 展 示 该 星体 的 维基 百科 词 条 。 点 击 浮 层 上 的 文字 ， 浏 
览 器 会 在 新 标签 页 里 打开 词 条 链接 。100 000 Stars 的 交互 体验 令 人 震撼 ， 包 括 美丽 的 渲染 






















































































注 1: 银 道 所 在 的 主 平面 。 银 河 系 成 员 如 恒星 、 尘 埃 云 及 气体 等 ， 绝 大 部 分 都 对 称 地 分 布 在 这 个 平面 的 两 
侧 。 一 一 译 者 注 
注 2: 指 观 测 者 用 肉眼 所 看 到 的 星体 亮度 。 一 一 译 者 注 

















效果 、 脉 冲动 画 和 宏伟 的 背景 音乐 ， 并 巧妙 地 集成 了 2D 用 户 界面 。 
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1: 由 Google 创建 的 100 000 Stars 项 目 (http://workshop.chromeexperiments.com/stars/) ; 
图 片 由 Google 提供 


100 000 Stars 是 Google 数据 艺术 小 组 的 一 个 实验 性 项 目 ， 目 的 在 于 证 明 Chrome 浏览 器 的 
丰富 能 力 。 尽 管 这 个 项 目 是 实验 性 的 ， 但 它 所 依赖 的 技术 却 并 不 是 : 它 基 于 被 当今 多 数 浏 
览 器 所 支持 的 HTMLS5 特性 。 星 系 和 星体 通过 WebGL 实时 泻 染 ， 这 是 一 项 新 的 支持 硬件 
3D 加 速 泻 染 的 图 形 标准 ， 标 签 通过 CSS3 中 的 3D 变换 来 实现 与 星体 的 位 置 对 应 ， 而 浮 层 
与 3D 内容 可 以 无 终结 合 ， 则 是 由 于 所 有 的 部 件 都 被 浏览 器 统一 解析 为 页 面 元 素来 展现 。 


几 年 前 ， 类 似 100 000 Stars 这 样 的 体验 只 能 用 本 地 客户 端的 形式 来 实现 ， 用 户 需要 下 载 庞 
大 的 安装 包 并 安装 到 本 地 计算 机 上 ， 而 开发 者 们 需要 使 用 复杂 的 开发 工具 ， 并 耗费 大 量 的 
时 间 和 金钱 来 实现 它 。 现 在 ， 它 可 以 用 开源 免费 的 工具 和 Web 标准 技术 栈 在 浏览 器 中 创 
建 。 此 外 ， 只 要 简单 地 重新 加 载 页 面 ， 你 就 能 立即 看 到 最 近 的 更 新 ， 通 过 URL 在 任何 地 
方 都 可 以 加 载 信息 ， 点 击 3D 环境 中 的 超 链接 还 可 以 访问 更 多 信息 。 


本 书 是 关于 如 何 利用 现代 训 览 器 的 强大 功能 来 创建 在 线 可 视 化 应 用 。 其 中 一 些 应 用 可 以 看 
作 传 统 3D 产品 的 复 刻 ， 为 覆盖 更 多 的 客户 以 及 节省 成 本 而 使 用 浏览 器 技术 来 进行 重 构 。 
而 由 于 门槛 的 降低 ， 各 个 领域 的 消费 型 应 用 也 得 以 使 用 3D 技术 来 构建 一 一 包括 广告 、 产 
品 营销 、 客 户 支持 、 教 育 、 培 训 、 旅 游 、 游 戏 、 娱 乐 ， 等 等 一 一 这 多 么 令 人 兴奋 ! 3D 为 
交互 体验 带 来 了 新 的 维度 ， 得 益 于 与 Web 技术 的 结合 ， 全 世界 的 人 们 现在 都 可 以 切身 地 感 
受 这 第 三 个 维度 。 


100 000 Stars 是 交互 式 媒体 发 展 的 力作 ， 它 的 创作 者 之 一 Michael Chang 为 这 
个 项 目 写 了 一 份 很 好 的 案例 分 析 。 如 果 希 望 了 解 更 多 关于 这 个 项 目 开 发 的 事 
情 ， 请 访问 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/。 






































1.1 HTML5: 新 型 的 视觉 媒介 


HTML 早已 不 像 最 初 那样 只 支持 静态 页 面 、 表 单 和 提交 按钮 。21 世纪 初 ， 浏 览 器 通过 

Ajax 技术 使 得 页 面 能 够 局 部 动态 更 新 ， 从 而 提供 了 更 加 丰富 的 交互 。 然 而 用 Ajax 切换 页 

面 的 具体 方式 始终 受 限 于 HIML 和 CSS 的 图 形 特性 。 如 果 开 发 者 希望 打破 这 些 限 制 ， 就 

必须 使 用 一 些 浏览 器 媒体 插件 ， 例 如 Flash 和 QuickTime。 

这 是 21 世纪 初 的 普遍 状况 ， 而 近 几 年 情况 已 经 改变 。 这 段 时 期 ， 许 多 浏览 器 在 发 展 过 程 

中 逐步 支持 了 HIML5。 有 了 HTML5， 浏 览 器 就 成 为 一 个 能 够 运行 复杂 应 用 的 平台 ， 这 些 

应 用 在 功能 和 性 能 上 均 可 媲美 本 地 应 用 。HTML5 是 HTML 标准 的 大 规模 修订 ， 包 括 语法 

的 清理 、 新 的 JavaScript 语言 特性 和 API、 移 动 端 支持 以 及 突破 性 的 多 媒体 支持 。HTML5 

平台 的 核心 是 一 系列 先进 的 图 形 技术 ， 本 书 将 重点 讲述 这 些 图 形 技术 。 

。 WebGL， 使 得 JavaScript 支持 硬件 3D 加 速 演 染 。WebGL 基于 OpenGL， 几 乎 所 有 的 
PC 端 浏 览 器 都 支持 WebGL， 而 越 来 越 多 的 移动 端 浏 览 器 也 开始 支持 WebGL。 

。 CSS3 3D 变换 、 平 移 以 及 可 以 支持 更 高 级 页 面 效果 的 用 户 自 定义 滤 镜 。 经 过 过 去 几 年 
的 发 展 ，CSS 现在 已 经 支持 硬件 3D 加 速 演 染 和 动画 。 

。 Canvas 元 素 和 相应 的 2D 绘图 API。 浏 览 器 普遍 支持 这 个 JavaScript 的 API， 它 使 得 开 
发 者 可 以 在 一 个 DOM 元 素 上 绘制 任意 图 形 。 尽 管 Canvas 是 一 个 2D 绘图 API， 但 如 果 
使 用 一 些 JavaScript 库 的 话 ， 它 也 可 以 用 于 渲染 3D 效果 一 一 在 不 支持 WebGL 和 CSS3 
3D 的 平台 上 ， 这 通常 被 作为 3D 泻 染 的 蔡 代 解决 方案 。 


这 些 技术 各 有 其 优 劣 和 适用 场景 ， 它 们 在 构建 3D 可 视 化 交互 的 过 程 中 发 挥 着 各 自 的 作用 。 
至 于 究 竞 要 选择 哪 一 种 ， 你 需要 综合 考虑 多 方面 的 因素 一 一 你 想 要 构建 什么 ,需要 支持 哪 
些 平台 ， 性 能 问题 ， 等 等 。 举 例 来 说 ， 如 果 你 要 开发 一 个 具有 高 质量 图 像 的 第 一 人 称 射击 
游戏 ， 若 不 借助 WebGL 访问 图 形 硬 件 的 能 力 ， 这 将 很 难 实现 。 又 或 者 你 在 为 某 个 视频 网 
站 开发 一 个 有 趣 的 调 台 器 界面 ， 包 括 当前 视频 缩 略 图 、 换 频道 的 旋转 效果 ， 以 及 视频 剪辑 
切换 间隙 的 雪花 噪点 特效 。 在 这 个 场景 下 ，CSS3 会 是 创造 优秀 体验 的 良好 选择 。 


总 而 言 之 ,，“HTML5” 这 个 概念 对 大 多 数 开发 者 而 言 指 的 是 一 系列 技术 和 
标准 ， 包 括 已 经 被 万 维 网 联盟 (W3C) 采纳 并 被 所 有 浏览 器 支持 的 标准 ， 
以 及 虽 没 有 达到 成 熟 标准 的 程度 但 已 经 被 浏览 器 广泛 支持 的 特性 。 还 有 如 
WebGL 这 类 已 经 成 熟 和 稳定 ， 但 不 由 W3C 管理 的 标准 。 





























































































































1.1.1 浏览 器 平台 
HTML5 为 Web 带 来 了 丰富 的 图 形 技术 ; 然而 ， 若 非 浏 览 器 其 他 特性 也 得 到 相应 的 发 展 ， 
这 些 图 形 技术 将 毫 无 用 武之 地 。 尤 其 是 以 下 提 及 的 几 点 ， 它 们 为 真正 的 HTML5 富 互 联网 
应 用 的 产生 铺 平 了 道路 。 
。 JavaScript 虚拟 机 性 能 的 提升 
WebGL 和 Canvas 2D 都 是 JavaScript 的 API，JavaScript 的 代码 运行 速度 决定 了 用 这 些 
技术 实现 的 动画 和 交互 的 运行 速度 。 儿 年 前 ，JavaScript 虚拟 机 的 性 能 是 3D 技术 实用 
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化 的 一 大 阻碍 ， 而 如 今 虚拟 机 性 能 的 提升 ， 使 得 这 个 问题 得 以 解决 。 
。 图 像 合 成 速度 的 提升 
浏览 器 负责 将 页 面 上 的 元 素 快速 合成 泻 染 并 避免 不 必要 的 重 绘 。 随 着 页 面 上 的 内 容 更 加 
动态 ， 浏 览 器 在 图 像 合成 方面 有 了 很 大 的 发 展 ， 包 括 对 所 有 的 视觉 元 素 一 一 不 管 是 2D 
还 是 3D 一 一 使 用 3D 硬件 加 速 演 染 。 
。 动画 支持 
requestAnimationFrame() 国 数 是 灰 代 setInterval() 和 setTimeout() 来 驱动 动画 的 新 国 
数 。 这 个 新 方法 使 得 开发 者 能 够 以 和 训 览 器 刷新 页 面 元 素 同 步 的 刷新 频率 来 更 新 canvas 
元 素 的 绘图 内 容 ， 这 大 大 地 提升 了 性 能 ， 并 防止 了 绘图 残 影 ”的 产生 。 
HIML5 浏览 器 同时 也 支持 多 线程 编程 (Web Workers)、 全 双 工 TCP/ 耻 通信 
(WebSockets) 、 本 地 数据 存储 等 新 特性 ， 利 用 它们 ， 开 发 者 得 以 构建 世界 级 的 Web 应 用 。 
这 些 特 性 以 及 WebGL、CSS3 3D 和 Canvas， 结 合 起 来 象征 着 一 个 革命 性 的 新 平台 ， 它 为 
任何 计算 机 和 设备 提供 在 线 的 可 视 化 应 用 。 


图 1-2 展示 了 Epic Games 团队 开发 的 Epic Citadel 游戏 的 一 个 测试 版 本 ， 它 运行 在 Firefox 
浏览 器 中 。Epic Citadel 使 用 WebGL 来 演 染 图 像 ， 然 而 这 个 游戏 的 杰出 表现 ， 还 是 应 当归 
功 于 游戏 引擎 的 突破 性 发 展 。 这 款 游 戏 使 用 了 Epic 团队 实现 的 浏览 器 版 Unreal 引擎 ， 这 
款 引擎 是 本 地 版 的 Unreal 引擎 在 Web 端的 移植 ， 使 用 Emscripten 编译 器 “(https://github. 
com/kripken/emscripten/wiki) 和 asm.js (一 个 新 的 底层 优化 程序 集 ) 来 实现 。 浏 览 器 用 户 
只 需 在 地 址 栏 输入 一 个 URL， 就 可 以 访问 这 染 精 良 的 全 屏 游戏 ， 游 戏 的 刷新 率 可 以 达到 每 
秒 60 帧 (60 fps) 的 水 准 ， 无 需 安装 ， 只 需 很 短 的 加 载 时 间 。 
































图 1-2: 运行 在 Firefox 中 的 Epic Citadel 测试 版 ， 一 个 使 用 WebGL 和 asm.js 实现 、 刷 新 率 达 到 60 
fps 的 网 页 游戏 ， 图 片 由 Epic Games 团队 提供 





注 3: 绘图 残 影 ，http://en.wikipedia.org/wiki/Visual_artifact。 一 一 译 者 注 
注 4: 款 可 以 将 C++ 代码 编译 成 JavaScript 代码 的 编译 器 。 一 一 译 者 注 
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1.1.2 浏览 器 支持 情况 

在 本 书写 作 时 ，3D 特性 并 没有 被 各 种 浏览 器 完全 支持 。 不 同 浏览 器 的 支持 情况 存在 细微 

的 差异 。 关 于 这 些 问题 ， 我 们 将 在 后 续 章 节 进 行 详细 讨论 ， 现 在 先 列 出 比较 重要 的 几 点 。 

。 所 有 的 桌面 浏览 器 都 支持 WebGL。 微 软 于 2013 年 年 底 在 IE11 中 支持 WebGL。 虽 然 这 
已 经 落后 于 其 他 浏览 器 厂商 ， 不 过 看 起 来 微软 会 迅速 赶 上 。 

。 几乎 所 有 的 移动 端 浏览 器 都 支持 WebGL: 移动 版 Chrome (Android)、 移 动 版 Firefox 
(Android 和 Firefox OS)、Amazon Silk (Kindle Fire HDX)、Intel 的 新 操作 系统 TIzen、 
BlackBerry 10。 移 动 版 Safari 以 一 种 受 限 的 方式 支持 WebGL ( 仅 在 iAds 框架 中 )。 

。 所 有 的 浏览 器 和 移动 平台 都 支持 CSS 3D 变换 。 而 CSS 自 定义 滤 镜 仅仅 被 桌面 版 
Chrome、 桌 面 版 Safari、 移 动 版 Safari、BlackBerry 10 以 实验 性 的 方式 支持 ， 正 和 
Firefox 均 不 支持 此 特性 。 


显然 ， 目 前 浏览 器 对 3D 特性 的 支持 并 没有 达到 最 佳 状况 ， 然 而 它 是 随 着 Web 应 用 这 个 领 
域 的 兴起 而 发 展 的 。 浏 览 颖 兼容 性 问题 向 来 为 人 诉 病 ， 随 着 HTMLS5 特性 以 及 设备 和 操作 
系统 的 飞速 发 展 ， 这 个 情况 并 没有 得 到 改善 。 值 得 安慰 的 是 ， 本 地 应 用 的 开发 、 测 试 、 部 
署 和 发 布 更 困难 ， 相 比 之 下 Web 开发 还 算 好 的 。 这 就 是 21 世纪 Web 开发 者 的 现状 。 



























































如 果 这 些 标 准 都 被 支持 了 ， 那 么 所 有 代码 都 只 需 写 一 次 就 行 。 然 而 ， 现 状 并 
非 是 “一 次 编写 ， 随 处 运行 ”， 而 是 “一 次 编写 ， 随 处 调试 。 


1.2 3D 图 形 的 基础 知识 


本 市 介绍 3D 图 形 的 核心 概念 和 术语 。 如 果 你 仅仅 有 2D Canvas 绘图 和 动画 开发 经 验 ， 请 
花 一 些 时 间 去 熟悉 你 以 往 没 有 接触 过 的 概念 ， 这 些 概念 将 贯穿 本 书 。 如 果 你 有 3D 或 
OpenGL 开发 的 相关 经 验 ， 那 么 可 以 跳 过 本 章 ， 直 接 进 入 下 一 章 。 


1.2.1 什么 是 3D 
既然 你 拿 起 这 本 书 ， 就 说 明 你 至 少 对 我 所 使 用 的 “3D 图 形 ”(3D graphics) 这 个 术语 有 基 
本 的 认 知 。 然 而 为 确保 你 对 这 个 概念 有 足够 清晰 的 认识 ， 我 们 来 看 看 它 正式 的 定义 。 以 下 
是 维基 百科 上 “3D 计算 机 图 形 ”(3D computer graphics) 的 条 目 (http://en.wikipedia.org/ 
wiki/3D_computer_graphics) : 
3D 计算 机 图 形 (相对 2D 计算 机 图 形 而 言 ) 是 使 用 三 个 维度 来 表示 几何 数据 (通常 使 
用 笛 卡 儿 坐 标 系 ) 并 将 其 存储 在 计算 机 中 ， 用 于 计算 和 绘制 成 屏幕 上 2D 图 像 的 一 类 图 
形 。 这 类 图 形 可 被 存储 起 来 代 随 时 浏览 ， 也 可 用 于 实时 显示 。 
这 个 定义 可 展开 为 几 个 部 分 : (1) 数据 使 用 三 维 坐标 系统 表示 ;， (2) 它 最 终 被 绘制 ( 演 米 ) 
为 一 个 2D 图 像 (正如 你 在 计算 机 显示 器 上 看 到 的 那样 ) ; (3) 它 支 持 实时 显示 ， 即 当 3D 数 
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据 由 于 动画 或 用 户 操作 发 生 改 变 的 时 候 ， 图 像 可 以 在 基本 无 延迟 的 情况 下 更 新 泻 当 。 最 后 
一 点 是 创建 交互 式 应 用 的 关键 。 它 非常 重要 ， 以 至 于 催生 了 一 个 价值 数 十 亿美 元 的 、 致 力 
于 发 展 支持 实时 3D 泻 染 的 图 形 专用 硬件 的 产业 。 像 NVIDIA、ATI、Qualcomm 这 些 公司 
都 是 这 个 领域 的 佼佼 者 ， 对 它们 ， 你 或 许 早 有 耳闻 。 

3D 图 形 并 不 依赖 于 像 轨迹 球 、 操 纵 杆 这 些 特 殊 的 输入 设备 ， 这 在 上 文 的 定义 中 没有 提 及 ， 
但 同样 非常 重要 。 它 也 不 依赖 于 特殊 的 显示 设备 ， 立 体 上 腿 镜 和 OmniMax 电影 院 的 昂贵 门 
票 都 不 是 必需 的 。3D 图 形 通 常 被 泻 染 在 2D 平面 的 显示 设备 上 。 当 然 这 并 不 是 说 3D 图 形 
不 能 被 展示 为 可 以 用 立体 眼镜 观看 的 立体 图 像 ， 或 者 是 在 立体 电视 的 屏幕 上 播放 一 一 只 是 
说 ， 这 不 是 必需 的 。 

3D 编程 需要 通常 Web 开发 者 掌握 的 知识 以 外 的 新 知识 和 技能 。 不 过 只 要 学 会 一 点 入门 知 
识 以 及 学 会 使 用 正确 的 工具 ， 我 们 的 学 习 进 展 就 会 非常 迅速 。 本 章 接 下 来 将 着 重 讲解 3D 
编程 的 基本 概念 ， 这 些 概 念 会 贯穿 全 书 。 本 章 对 这 些 概念 的 说 明 并 不 全 面 〈《 有 些 书 专 门 详 
细 地 讲解 了 这 些 概念 ) ， 仅 供 入 门 。 如 果 你 有 3D 编程 经 验 ， 完 全 可 以 跳 至 第 2 章 。 


1.2.2 ”3D 坐 标 系 


如 果 你 熟悉 2D 第 卡 儿 坐 标 系 ， 例 如 HTML 文档 的 窗口 坐标 系 ， 那 对 x 和 yy 的 含义 一 定 
不 陌生 。 这 些 2D 坐标 定义 了 <div> 标签 在 页 面 中 的 位 置 ， 以 及 虚拟 画笔 或 画 刷 在 HTML 
Canvas 元 素 中 的 绘图 位 置 。3D 绘图 ， 正 如 你 所 料 ， 是 发 生 在 3D 坐标 系统 中 的 。 在 这 个 系 
统 中 ， 一 个 额外 的 坐标 z 被 用 于 描述 深度 ( 即 一 个 物体 绘制 的 位 置 距离 屏幕 的 远近 ) 这 个 
概念 。 本 书 使 用 的 坐标 系统 如 图 1-3 所 示 : x 轴 沿 水 平方 向 延伸 (从 左 到 右 ), y 轴 沿 垂直 
方向 延伸 ，z 轴 正 方向 指向 屏幕 外 。 如 果 你 熟悉 2D 坐标 系统 的 概念 ， 那 么 理解 起 3D 坐标 
系统 来 应 该 也 不 困难 。 
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图 1-3: 一 个 3D 坐标 系统 (https://commons.wikimedia.org/wiki/File:3D_coordinate_system.svg) ; 
遵循 知识 共享 署名 - 相同 方式 共享 3.0 未 本 地 化 版 本 协议 使 用 





注意 ，WebGL 的 y 轴 正 方向 由 窗口 的 下 方向 上 ， 而 2D Canvas API 和 CSS 
变换 中 的 > 轴 正 方向 则 是 由 上 而 下 的 。 虽 然 这 很 精 ， 不 过 我 们 可 以 从 中 看 出 
两 种 技术 的 传承 : WebGL 基于 约定 y 轴 向 上 的 传统 图 形 标准 ， 而 Canvas 和 
CSS 是 基于 HTML 坐标 系 y 轴 向 下 的 约定 一 一 HTML 的 这 个 约定 则 来 源 于 
早期 的 窗口 系统 坐标 方案 。 如 果 你 要 在 一 个 项 目 中 同时 使 用 这 两 种 技术 ， 那 
就 得 一 直 注 意 这 种 区 别 。 幸 好 在 这 两 种 技术 中 z 轴 的 方向 是 一 致 的 ， 不 然 可 
就 更 麻烦 了 。 


1.2.3 网 格 、 多 边 形 与 顶点 


绘制 3D 图 形 的 方法 有 很 多 种 。 到 目前 为 止 ， 最 常用 的 方法 是 网 格 (mesh)。 一 个 网 格 通常 
由 一 个 或 多 个 多 边 形 拼接 而 成 ， 而 这 些 多 边 形 是 由 定义 了 3D 空间 位 置 (x, y, z 组 ) 的 顶点 
(vertice) 构造 出 来 的 。 在 网 格 中 ， 最 常用 的 多 边 形 是 三 角形 (由 三 个 顶点 构造 而 成 ) 和 四 
边 形 (由 四 个 顶点 构造 而 成 )。3D 网 格 通常 简称 模型 (model)。 


图 1-4 描绘 了 一 个 3D 网 格 。 深 色 线 条 勾勒 出 组 成 网 格 的 四 边 形 ， 定 义 出 人 脸 的 形状 。( 在 
最 终 演 染 出 来 的 图 像 中 ， 你 将 不 会 看 到 这 些 线条 ， 它 们 只 是 参考 线 。) 网 格 顶 点 中 的 x、y、 
z 属性 仅仅 定义 了 网 格 的 形状 ， 而 网 格 的 外 观 特性 ， 如 色彩 和 明暗 等 ， 则 由 其 他 属性 来 定 
义 。 下 面 ， 我 们 来 简单 地 讨论 这 些 属 性 。 

















图 1-4: 一 个 3D 网 格 ， 遵循 知识 共享 署名 - 相同 方式 共享 3.0 未 本 地 化 版 本 协议 使 用 ( 另 见 彩 插 图 
1-4) 
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1.2.4 材质 、 纹 理 与 光源 


除 x、y、z 这 几 个 顶点 位 置信 息 属 性 之 外 ， 还 有 一 些 其 他 属性 被 用 来 描述 网 格 的 外 观 ， 包 
括 简 单 的 色彩 属性 和 复杂 的 反射 、 明 瞳 等 属性 。 你 还 可 以 使 用 一 个 或 多 个 位 图 来 表示 外 观 
信息 ， 这 通常 被 称 为 纹理 映射 (texture map) ， 或 简称 纹理 。 单 个 纹理 可 以 直接 定义 外 观 样 
式 〈 正 如 一 张 图 像 被 印 在 工 恤 上 那样 ) ， 也 可 以 与 其 他 纹理 结合 起 来 实现 复杂 的 效果 ， 如 
表面 凹凸 、 光 的 衍射 等 。 在 大 多 数 图 形 系 统 中 ， 网 格 的 外 观 属性 统称 材质 (material)。 材 
质 的 展现 通常 依赖 于 一 个 或 多 个 光源 (light) 的 存在 ， 这 些 光源 定义 了 一 个 场景 被 照 亮 的 
模式 。 

图 1-4 中 的 人 头 具 有 紫色 的 表面 材质 ， 一 个 从 模型 左边 发 出 的 光源 造成 了 模型 的 明暗 效果 。 
注意 ， 暗 部 在 脸 的 右 侧 。 


1.2.5 “变换 与 矩阵 


顶点 坐标 的 位 置 定义 了 整个 3D 网 格 的 位 置 。 当 你 希望 改变 一 个 网 格 在 3D 视图 中 的 位 置 
的 时 候 ， 如 果 要 一 个 个 地 改变 每 个 顶点 的 位 置 ， 显 然 太 麻烦 了 ， 尤 其 是 当 网 格 在 进行 持续 
动画 的 时 候 。 为 此 ， 多 数 3D 系统 支持 变换 (transform) 操作 ， 即 允许 使 用 相对 位 置 运算 
来 移动 网 格 ， 而 非 遍 历 所 有 顶点 并 确实 改变 它们 的 位 置 数值 。 变 换 人 允许 你 缩放 、 旋 转 以 及 
平移 (移动) 一 个 泻 染 好 的 网 格 ， 而 无 需 实际 去 改变 所 有 顶点 的 数值 。 


图 1-5 描绘 了 3D 变换 操作 ， 在 这 个 场景 中 我 们 可 以 看 到 三 个 立方 体 。 这 三 个 立方 体 网 格 
具有 同样 的 顶点 数值 。 当 移动 、 旋 转 和 缩放 网 格 的 时 候 ， 我 们 并 没有 实际 去 修改 顶点 的 
值 ， 而 是 应 用 了 变换 。 左 边 红 色 的 立方 体 被 向 左 平移 了 四 个 单位 长 度 (x 轴 上 的 -4), 并 
围绕 它 自身 的 x 轴 和 y 轴 进 行 了 旋转 。( 广 意 ， 旋 转 值 的 单位 是 弧度 ， 这 个 单位 将 在 第 4 章 
中 更 详细 地 说 明 。) 右边 蓝 色 的 立方 体 被 向 右 平移 了 四 个 单位 长 度 ， 并 在 三 个 维度 上 都 放 
大 了 1.5 倍 。 中 间 绿 色 的 立方 体 没有 进行 任何 变换 。 












































图 1-5: 3D 变换 一 一 平移 、 旋 转 和 缩放 〈 另 见 彩 插图 1-5) 
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3D 变换 通常 由 一 个 变换 答 阵 (transformation matrix) 来 表示 ， 这 是 一 个 包含 一 组 用 于 计算 
转换 后 顶点 位 置 的 数值 的 运算 量 。 绝 大 多 数 WebGL 变换 用 一 个 4x4 矩 阵 来 表示 = 个 
包含 16 个 数字 的 、4 行 4 列 的 二 维 数组 。 图 1-6 展示 了 一 个 4x4 乞 阵 的 布局 。 平 移 被 存 
储 在 元 素 m12、m13、m14 中 ， 分 别 对 应 x、y、z 的 平移 值 。x、y、z 的 缩放 值 存储 在 元 素 
m9、m5、m19 中 〈 拖 阵 的 对 角 线 )。 旋 转 值 存储 在 nl 和 m2 (x 轴 ), m4 和 m6 (y 轴 )，m8 和 
m9 (z 轴 ) 中 。 用 这 个 矩阵 去 乘 一 个 三 维 向 量 ， 便 可 得 到 变换 后 的 值 。 
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1-6: 一 个 4x4 变换 矩阵 (http:/www.songho.ca/openglyglL transform.html) ; 经 许可 进行 了 修改 〈 另 
见 彩 插图 1-6) 


如 果 你 和 我 一 样 是 线性 代数 爱好 者 ， 那 你 会 觉得 用 和 矩阵 来 描述 变换 的 概念 相当 容易 接受 。 
就 算 不 是 也 不 用 怕 ， 用 于 构建 本 书 示例 的 工具 都 很 好 地 隐藏 了 与 这 些 和 矩阵 操作 相关 的 细 
节 : 你 只 需 以 平移 、 旋 转 、 缩 放 的 直观 概念 来 处 理 程序 就 行 。 


1.2.6 相机、 透视 、 视 口 与 投影 

每 个 泻 染 好 的 场景 都 需要 一 个 供用 户 查 看 场景 的 观察 点 。3D 系统 中 通常 使 用 相机 
(camera) 的 概念 来 描述 这 个 观察 点 。 相 机 定义 了 用 户 相 对 于 场景 的 位 置 和 朝向 ， 它 具备 
现实 世界 中 相机 的 属性 ， 如 视野 (field of view) 的 尺寸 ， 它 定义 了 延 视 (perspective， 即 
远 处 的 物体 看 起 来 比较 小 )。 相 机 的 各 种 属性 综合 起 来 ， 提 供 了 3D 场景 最 终 在 2D 视 口 
(viewport) 上 的 泻 染 结果 ， 视 口 是 由 浏览 器 窗口 或 canvas 元 素 决 定 的 。 


相机 通常 用 一 对 和 矩阵 来 表示 。 第 一 个 矩阵 定义 相机 的 位 置 和 方向 ， 类 似 变 换 和 矩阵 ( 见 前 
文 )。 第 二 个 矩阵 专门 用 于 表示 相机 的 3D 坐标 到 视 口 的 2D 绘制 空间 坐标 的 转换 ， 称 为 投 
影 矩 阵 (projection matrix)。 我 就 知道 ,讨厌 的 数学 又 来 了 。 然 而 ， 相 机 和 矩阵 的 细节 在 多 
数 工 具 中 已 经 被 很 好 地 隐藏 起 来 ， 一 般 来 说 ， 你 只 需 对 准 、 拍 摄 以 及 泻 染 。 

1-7 描述 了 相机 、 视 口 和 透视 的 基本 概念 。 左 下 角 有 一 个 眼睛 图 标 ， 它 代表 相机 的 位 置 。 
指向 右 侧 的 红色 向 量 (在 图 中 被 标注 为 x 轴 ) 表示 相机 的 指向 。 蓝 色 的 立方 体 是 3D 场景 
中 的 物体 ， 绿 色 和 红色 的 矩形 分 别 是 近 剪 裁 平面 (near clipping plane) 和 远 剪裁 平面 (far 
clipping plane)。 这 两 个 平面 定义 了 一 个 3D 空间 子 集 的 范围 ， 通 称 视 锥 体 或 视 见 体 (view 
volume 或 view frustum)。 只 有 位 于 视 见 体 中 的 物体 才 会 被 真正 泻 染 到 屏幕 上 。 近 剪裁 平面 
等 效 于 视 口 ， 在 这 里 ， 我 们 会 看 到 最 终 泻 染 出 来 的 图 像 。 
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图 1-7: 相机 、 视 口 和 透视 (http://obviam.net/index.php/3d-programming-with-android-projections- 
perspective/) ;经 许可 进行 了 修改 〈 另 见 彩 插图 1-7) 


相机 非常 强大 ， 它 从 根本 上 定义 了 观察 者 和 3D 场景 之 间 的 关系 ， 并 为 这 个 关系 提供 了 现 
实感 。 相 机 也 为 动画 制作 者 提供 了 强 有 力 的 武器 : 通过 动态 改变 相机 的 位 置 ， 可 以 创造 电 
影 般 的 效果 并 控制 其 叙事 风格 。 


1.2.7 ”着色 器 


为 了 渲染 出 一 个 网 格 的 最 终 图 像 ， 开 发 者 需要 准确 定义 顶点 、 变 换 、 材 质 、 光 源 以 及 相机 
是 如 何 相互 作用 并 最 终生 成 图 像 的 。 而 承担 这 个 工作 的 ， 是 着 色 器 (shader)。 着 色 器 (又 
称 为 “可 编程 着 色 器 ") 是 一 段 源 代 码 ， 它 实现 了 将 网 格 像素 点 投影 到 屏幕 上 的 算法 。 
形 硬件 能 够 解析 项 点、 纹理 以 及 其 他 底层 的 东西 ， 但 并 不 能 处 理 材 质 、 光 源 、 变 换 以 及 相 
机 。 这 些 高 级 的 结构 由 着 色 器 程序 来 处 理 。 着 色 器 通常 使 用 类 C 的 高 级 语言 编写 ， 并 被 编 
译 成 可 以 被 图 形 处 理 单元 《GPU) 执行 的 代码 。 

所 有 的 现代 计算 机 和 设备 都 配备 了 图 形 处 理 单 元 ， 一 个 独立 于 CPU 的 、 专 
门 用 于 3D 图 形 浑 染 的 处 理 器 。 本 书 中 讨论 的 主要 3D 编程 技术 都 以 GPU 存 
在 为 前 提 。 

















































































































着 色 器 为 程序 员 的 双手 注入 了 神奇 的 力量 : 借助 着 色 器 ， 程 序 员 可 以 精准 地 控制 每 一 个 像 
素 和 每 一 次 图 像 演 染 。 着 色 器 驱动 着 好 莱 坞 电影 特效 中 那些 令 人 拍案 叫绝 的 视觉 效果 ， 了 驱 
动 着 “CG” 动 画 电 影 ， 驱 动 着 现代 电子 游戏 中 的 实时 演 染 。 随 着 Web 浏览 器 对 着 色 器 的 
支持 ， 我 们 的 WebGL 应 用 效果 甚至 可 以 媲美 最 好 的 电子 游戏 。 而 利用 着 色 器 ， 我 们 也 得 
以 更 好 地 控制 页 面 中 CSS 元 素 的 展现 和 动画 。 


图 1-8 展示 了 一 个 使 用 可 编程 着 色 器 泻 染 的 WebGL 水 波 模 拟 案例 。 正 波 荡 澜 、 光 影 跃 动 ， 












































通 真 得 惊人 ， 而 且 你 还 可 以 实时 地 与 场景 进行 交互 ， 尽 管 它 是 虚拟 的 。 提 醒 一 下 : 这 可 是 
在 一 个 Web 浏览 器 中 运行 的 ! 

















1-8 使 用 可 编程 着 色 器 泻 染 的 WebGL 水 波 模拟 ， 创 作者 Evan Wallace (http://madebyevan. 
com/webgl-water/) ;转载 已 被 许可 


除了 WebGL， 借 助 CSS 自 定 义 滤 镜 (CSS Custom Filter) 这 项 实验 性 的 技术 ， 基 于 着 色 器 
实现 的 特效 同样 可 以 应 用 于 DOM 元 素 。 关 于 这 一 点 ， 我 们 在 第 6 章 中 将 会 详细 讨论 。 
以 下 列举 了 一 些 与 着 色 器 相关 的 技术 点 ， 我 们 将 在 本 书 中 讲述 。 


。 WebGL 和 CSS 自 定义 滤 镜 都 使 用 OpenGL ES 着 色 语 言 (GLSL ES) 定义 的 着 色 器 。 在 
WebGL 中 编写 着 色 器 和 为 CSS 编写 着 色 器 不 大 一 样 ， 但 基本 的 编程 语言 是 通用 的 。 

。 在 WebGL 中 ,物体 的 泻 染 绘制 依赖 于 着 色 器 。 如 果 没 有 提供 着 色 器 ， 或 者 编译 或 加 载 

着 色 器 过 程 出 错 ， 则 所 有 物体 都 无 法 成 功 渲染 。 

。 在 CSS3 滤 镜 中 ， 着 色 器 是 可 配置 的 。 当 着 色 器 被 用 来 定义 CSS3 滤 镜 的 时 候 ， 它 被 称 
为 自 定义 滤 镜 。 

。 2D Canvas API 不 支持 可 编程 着 色 器 。 如 果 你 打算 用 2D Canvas 作为 WebGL 的 降级 方案 ， 
得 在 代码 里 面 自己 实现 这 套 机 制 。 关 于 这 一 点 ， 在 第 7 章 中 将 有 详细 说 明 。 


着 色 器 从 某 种 意义 上 来 说 代表 了 一 条 学 习 曲 线 ， 你 需要 学 习 新 的 特性 以 及 一 门 新 的 编程 语 
言 ， 这 需要 耗费 大 量 的 精力 。 如 果 你 觉得 这 太 可 怕 了 ， 别 担心 ， 有 许多 流行 的 开源 库 和 工 
有 具 可 供 选 择 ， 如 此 一 来 ， 你 就 无 需 去 关注 那些 艰 座 的 着 色 器 具体 实现 细节 。 甚 至 在 你 的 
3D 编程 职业 生涯 中 ， 你 连 一 行 GLSL 代码 都 无 需 编写 不 过 我 建议 你 还 是 试 试看 ， 这 
样 一 来 ， 你 就 可 以 对 别人 说 你 做 过 这 件 事 啦 。 

关于 3D 图 形 基础 内 容 的 介绍 至 此 结束 。 书 中 提 及 的 每 种 技术 的 具体 实现 会 略 有 不 同 ， 但 
核心 的 概念 都 是 一 致 的 。 在 接 下 来 的 几 章 中 ， 我 们 将 深入 研究 如 何 使 用 WebGL、CSS3 和 
Canvas 2D 来 创建 3D 内 容 并 实现 3D 动画 。 
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WebGL: 实时 30 泻 染 

















WebGL 是 Web 3D 图 形 的 标准 API， 它 使 得 运行 在 浏览 嚣 中 的 JavaScript 程序 也 可 以 充分 
利用 3D 渲染 硬件 的 强大 能 力 。 在 WebGL 出 现 之 前 ， 为 提供 硬件 加 速 的 3D 体验 ， 开 发 者 
只 能 借助 浏览 器 插件 或 编写 需要 用 户 下 载 安 装 的 本 地 软件 。 

尽管 WebGL 不 属于 HTML5 官方 标准 ， 但 绝 大 多 数 支 持 HTML5 的 浏览 器 都 支持 
WebGL 正如 支持 Web Workers、WebSockets 等 并 未 被 W3C 官方 作为 标准 采纳 的 技术 
一 样 。 要 想 将 浏览 器 打造 成 一 流 的 应 用 平台 ，3D 是 不 可 或 缺 的 部 分 ， 这 是 Google、Apple、 
Mozilla、Microsoft、Amazon、Opera、Intel、BlackBerry 等 各 大 公司 开发 者 们 的 共识 。 


主流 的 桌面 浏览 器 和 绝 大 多 数 手机 浏览 器 都 支持 WebGL'。WebGL 已 经 可 以 运行 在 类 似 于 
你 的 家 用 机 器 和 办 公 机 器 的 数 百 万 台 设 备 上 。 包 括 游戏 、 数 据 可 视 化 、 计 算 机 辅助 设备 、 
3D 打印 和 零售 行业 在 内 的 许多 使 用 了 WebGL 技术 的 网 站 也 在 轩 勃 发 展 。 


WebGL 是 一 套 底层 绘图 API: 它 通 过 解析 数据 和 着 色 器 阵列 “来 进行 绘制 。 它 不 像 2D 
Canvas API 那样 具有 高 度 封 装 的 结构 ， 这 可 能 会 令 习 惯 2D 图 形 接口 的 人 感到 困惑 。 不 过 
很 多 开源 的 JavaScript 工具 包 都 提供 了 更 加 高 级 的 封装 方法 ， 这 些 工 具 包 让 开发 者 可 以 用 
与 操作 传统 图 形 库 更 为 接近 的 方式 来 操作 WebGL 的 API。 虽 然 有 了 这 些 工 具 包 ，3D 开发 
也 还 是 有 一 定 的 难度 ， 但 至 少 利用 它们 ， 对 3D 开发 没什么 经 验 的 人 可 以 比较 方便 地 入 门 ， 
而 有 经 验 的 3D 开发 者 也 可 以 节省 大 量 时 间 。 

















































































































注 1: 在 本 书写 作 时 ，iOS 上 的 Mobile Safari 还 不 支持 WebGL， 这 是 个 很 严重 的 问题 。 所 幸 利 用 某 些 适 配 
工具 包 ， 我 们 可 以 将 基于 HITML5 和 WebGL 的 程序 打包 成 本 地 应 用 在 iOS 平台 上 运行 、 研 究 ， 关 于 
这 个 问题 ， 在 第 12 章 中 会 有 详细 的 说 明 。 
注 2: 阵列 ， 指 排 成 行 和 列 的 数学 元 素 。 和 矩阵 就 是 一 种 典型 的 阵列 形式 ， 此 处 姑且 可 以 简单 理解 为 一 个 数 
据 / 着 色 器 二 维 数组 。 一 一 译 者 注 
























































为 了 让 读者 对 WebGL 有 个 基本 印象 ， 本 章 将 简单 介绍 WebGL 的 底层 基础 。 虽 然 我 们 在 
本 书 中 使 用 的 工具 包 可 以 让 你 不 必 去 关注 这 些 底层 细 市 ， 但 了 解 这 些 工 具 包 是 基于 什么 构 
建 的 也 非常 重要 。 所 以 ， 让 我 们 从 WebGL 的 核心 概念 和 API 开始 学 习 。 


正如 不 支持 许多 HTML5 新 特性 一 样 ， 你 的 电脑 可 能 也 不 支持 WebGL。 主 流 
桌面 浏览 器 中 ， 一 部 分 浏览 器 只 有 比较 新 的 版 本 才 支 持 WebGL (例如 下 只 
有 IE11 及 其 之 后 的 版 本 才 支 持 WebGL)。 还 有 一 些 老 机 器 的 图 形 处 理 器 不 
支持 3D 硬件 加 速 ， 在 这 些 老 机 器 上 ， 浏 览 器 会 直接 关闭 WebGL。 如 果 你 想 
了 解 你 的 目标 机 器 、 设 备 或 浏览 器 是 否 支 持 WebGL， 请 访问 http://caniuse. 
com/， 键 入 “WebGL” 关 键 字 进 行 搜索 ， 或 直接 访问 这 个 链接 : http:/ 
caniuse.com/#search=WebGL。 




















2.1 WebGL 基 础 


WebGL 的 雏形 在 2006 年 由 Mozilla 的 工程 师 Vladimir Vukikevik 提出 。Vladimir Vukikevié 
试图 创建 一 套用 于 Canvas 元 素 的 3D 绘图 API， 作 为 已 有 的 2D Canvas API 的 扩展 。 他 基 
于 OpenGL ES (在 移动 端 图 形 领域 已 经 相当 普及 的 API 标准 ) 设计 了 这 套 当 时 还 被 称 为 
Canvas 3D 的 API。 到 2007 年 ，Mozilla 和 Opera 分 别 实现 了 各 自 浏览 器 上 的 Canvas 3D 
版 本 。 


2009 年 ， 来 自 Opera、Apple 以 及 Google 的 其 他 参与 者 与 Vukitevit 共同 创建 了 WebGL 
工作 组 ， 这 个 工作 组 隶属 于 Khronos Group 团队 ，Khronos Group 团队 还 维护 着 OpenGL、 
COLLADA 以 及 其 他 一 些 你 或 许 已 经 耳熟能详 的 标准 。 如 今 Khronos 仍然 在 继续 维护 
WebGL 标准 。Vukibevié 担任 WebGL 小 组 负责 人 直到 2010 年 ， 之 后 Google 的 Kenneth 
Russell 接替 了 他 。 


以 下 是 来 自 Khronos 网 站 的 WebGL 官方 描述 : 


WebGL 是 一 套 免费 、 跨 平台 的 API， 它 在 HTML 中 以 3D 绘图 上 下 文 的 形式 实现 了 
OpenGL ES 2.0 的 功能 ， 并 以 底层 的 文档 对 象 模 型 (Document Object Model，DOM) 接 
口 的 形式 将 开发 接口 暴露 出 来 。 它 使 用 OpenGL 着 色 器 语言 GLSL ES， 并 且 可 以 与 页 面 
上 的 其 他 内 容 (可 以 分 层 的 形式 有 到 加 在 3D 绘图 区 域 的 上 方 或 下 方 ) 无 颖 融合 。 它 非常 
适应 于 使 用 JavaScript 编程 语言 构建 的 3D Web 动态 应 用 ， 并 将 被 现代 浏览 器 完美 支持 。 

这 个 定义 包括 几 个 要 点 ， 下 面 我 们 来 分 别 说 明 。 

。 WebGL 是 一 套 API。 它 通过 一 套 专 门 的 JavaScript 编程 接口 来 调用 ， 不 像 HTML 那样 

带 有 附带 的 标记 。3D 泻 染 与 2D 绘制 同样 使 用 Canvas 元 素来 作为 绘图 上 下 文 ， 开 发 者 
通过 对 JavaScript API 的 调用 ， 在 Canvas 中 实现 3D 内 容 的 绘制 。 事 实 上 ， 对 WebGL 
接口 的 访问 是 通过 现 有 Canvas 元 素 中 的 3D 专用 绘图 上 下 文 来 实现 的 。 

。 WebGL 基于 OpenGL ES 2.0。OpenGL ES 是 长 久 以 来 的 3D 浓 染 标准 OpenGL 的 一 个 
适 配 方案 。ES 代表 “ 租 入 式 系统 ”(embedded system) ， 这 表示 它 专用 于 小 型 计算 设备 ， 
尤其 是 手机 和 平板 电脑 。OpenGL ES 是 为 iPhone、iPad 和 Android 手机 提供 3D 图 形 泻 
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染 能 力 的 标准 接口 。WebGL 的 设计 者 们 认为 ， 基 于 OpenGL ES 更 小 的 硬件 占用 量 ， 可 
以 更 方便 地 提供 一 套 统一 的 、 跨 平台 跨 浏 览 器 的 、 用 于 Web 的 3D API。 

。 WebGL 可 以 与 其 他 Web 页 面 元 素 相 结 合 。WebGL 可 以 以 分 层 的 形式 置 于 其 他 页 面 内 
容 的 上 方 或 下 方 。3D canvas 可 以 占据 页 面 的 一 部 分 或 整个 页 面 ， 它 也 可 以 被 包含 在 被 
设置 了 z-index 属性 的 <div> 元 素 中 。 这 意味 着 你 可 以 使 用 WebGL 来 构建 3D 图 形 ， 而 
使 用 你 所 熟悉 的 HTML 特性 来 构建 其 他 页 面 元 素 ， 并 将 它们 (通过 浏览 器 ) 无 颖 组 合 
在 同一 个 页 面 上 展示 给 用 户 。 

。 WebGL 为 创建 动态 Web 应 用 而 生 。WebGL 在 设计 过 程 中 就 考虑 到 了 网 络 传输 的 需要 。 
它 始 于 OpenGL ES,， 但 它 加 入 了 许多 与 浏览 器 适 配 的 特性 。 它 使 用 JavaScript 编写 ， 并 
且 对 Web 传播 相当 友好 。 

。 WebGL 是 跨 平台 的 。WebGL 可 以 运行 在 任意 操作 系统 上 ， 无 论 是 手机 、 平 板 电脑 还 
是 台式 电脑 。 

。 WebGL 是 免费 的 。 正 如 所 有 的 开放 Web 标准 那样 ，WebGL 可 以 免费 使 用 。 没 有 人 会 

因为 你 使 用 了 WebGL 而 要 求 你 支付 版 权 费 用 。 


Chrome、Firefox、Safari 以 及 Opera 的 创造 者 们 为 发 展 和 支持 WebGL 投入 了 众多 的 资源 。 
来 自 这 些 浏览 器 开发 组 的 工程 师 们 同样 也 是 WebGL 标准 组 织 的 重要 成 员 。WebGL 标准 的 
发 展 进程 对 Khronos 小 组 的 全 体 成 员 开 放 ， 同 时 也 有 对 公众 开放 的 邮件 组 。 本 书 的 附录 中 
提供 了 邮件 组 和 其 他 标准 相关 资源 的 详细 信息 。 


2.2 WebGL API 


WebGL 基于 成 熟 的 图 形 API 一 一 OpenGL。WebGL 始 于 20 世纪 80 年 代 末 期 ， 在 经 历 了 来 
自 微软 的 DirectX 的 竞争 威胁 后 ， 成 为 了 3D 图 形 编程 无 可 争议 的 行业 标准 。 


但 所 有 的 OpenGL 版 本 都 不 尽 相 同 。 不 同 平台 一 一 包括 台式 电脑 、 电 视 机 机 顶 盒 、 智 能 手 
机 以 及 平板 电脑 一 一 具有 不 同 的 特性 ， 因 此 针对 不 同 平台 的 OpenGL 版 本 也 由 此 发 展 起 
来 。OpenGL ES 是 针对 机 顶 盒 和 智能 手机 这 类 小 型 设备 的 OpenGL 版 本 ， 因 此 ， 它 成 为 了 
WebGL 的 理想 核心 。 它 小 而 精 ， 这 不 仪 意味 着 它 可 以 直接 被 浏览 器 实现 ， 更 意味 着 不 同 
浏览 器 的 开发 者 都 可 以 很 方便 地 在 浏览 器 中 实现 对 WebGL 的 支持 ， 从 而 使 得 在 一 款 浏览 
器 中 编写 济 试 的 WebGL 应 用 可 以 直接 运行 在 另 一 款 浏览 器 中 。 

WebGL 非常 精巧 ， 这 使 得 WebGL 应 用 的 开发 者 们 需要 做 更 多 的 工作 。3D 场景 本 身 不具 
备 DOM 结构 , 也 没有 原生 支持 的 用 于 加 载 几何 图 形 和 动画 的 3D 文件 格式 ; 除了 几 个 底层 
的 系统 事件 以 外 ，3D canvas 并 不 具备 内 建 的 事件 机 制 〈 例 如 ， 当 你 点 击 场景 中 的 某 个 物 
体 的 时 候 ， 这 个 物体 并 不 会 触发 鼠标 点 击 事件 )。 对 一 般 的 Web 开发 者 来 说 ，WebGL 意味 
着 陡峭 的 学 习 曲 线 和 许多 陌生 的 概念 。 


有 许多 开源 的 代码 库 可 以 让 WebGL 开发 变 得 不 那么 困难 ， 正 如 jQuery 或 Prototype.js 对 于 
传统 Web 开发 的 意义 那样 一 一 这 个 比喻 或 许 比较 粗糙 。 在 接 下 来 的 几 章 我 们 会 详细 介绍 这 

























































































































































































注 3: 可 以 理解 为 3D 场景 中 的 单个 物体 不 具备 单独 的 文档 结构 ， 即 整个 canvas 中 的 绘图 内 容 被 视 为 一 个 整 
体 。 一 一 译 者 注 
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些 库 。 不 过 现在 我 们 先 来 简单 了 解 一 下 底层 的 WebGL， 尽 管 在 你 的 项 目 中 你 可 能 不 会 有 
机 会 去 编写 这 些 底层 的 WebGL 代码 ,但 了 解 一 下 引擎 背后 的 实现 机 制 ， 总 归 是 有 好 处 的 。 


2.3 WebGL 应 用 齐 析 


说 到 底 ，WebGL 就 是 个 绘图 库 ， 类 似 2D canvas 那样 ， 是 被 所 有 支持 HTML5 的 浏览 器 所 
支持 的 另 一 种 canvas。 事 实 上 ，WebGL 也 使 用 了 Canvas 元 素来 作为 在 浏览 器 页 面 上 绘制 
3D 图 形 的 容器 。 

为 了 在 页 面 中 渲染 WebGL， 一 个 应 用 至 少 应 当 执行 以 下 步骤 ; 

(1) 创建 一 个 Canvas 元 素 ; 

(2) 获取 Canvas 元 素 中 的 绘图 上 下 文 ; 

(3) 初始 化 视 口 ， 

(4) 创建 一 个 或 多 个 包含 待 泻 染 数 据 (通常 是 顶点 数据 ) 的 缓冲 ， 

(5) 创建 一 个 或 多 个 定义 顶点 缓冲 到 屏幕 空间 转换 规则 的 矩阵 ， 

(6) 创建 一 个 或 多 个 实现 绘制 算法 的 着 色 器 ， 

(7) 使 用 各 项 参数 初始 化 着 色 器 ，; 

(8) 绘制 。 


下 面 我 们 用 一 些 示例 来 说 明 这 个 流程 。 
2.4 一 个 简单 的 WebGL 示 例 
为 了 说 明 WebGL API 的 基本 工作 机 制 ， 我 们 来 编写 一 个 非常 简单 的 程序 ， 在 canvas 上 给 


制 一 个 白色 正方 形 。 文 件 Chapter 2/example2-1.html 中 有 这 个 示例 的 完整 代码 ， 绘 制 结果 
如 图 2-1 所 示 。 










































































2-1: 使 用 WebGL 绘制 的 一 个 正方 形 
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本 节 大 部 分 示例 的 灵感 来 源 于 Learning WebGL (http://learningwebgl.com/) 
上 的 课程 。Learning WebGL 由 Giles Thomas 创立 ， 是 一 个 出 色 的 资源 站 点 ， 
它 提 供 了 一 系列 学 习 WebGL 的 教程 。 该 网 站 还 设 有 关于 WebGL 新 应 用 的 
周刊 ， 可 供 随时 了 解 WebGL 最 新 的 发 展 动向 。 





2.4.1 Canvas 元 素 和 WebGL 绘 图 上 下 文 


所 有 的 WebGL 演 染 都 发 生 在 一 个 上 下 文 (context) 中 ， 这 是 一 个 提供 了 完整 WebGL API 
的 DOM 对 象 。 这 个 结构 与 HTML5 Canvas 元 素 提 供 2D 绘图 上 下 文 的 模式 相同 。 想 要 在 
页 面 中 插入 WebGL 的 内 容 ， 首 先 需要 在 页 面 上 的 某 个 位 置 创建 一 个 <canvas> 标签 ， 获 取 
与 其 相关 的 DOM 对 象 (可 以 使 用 document.getELlementById())， 并 获取 这 个 DOM 对 象 的 
WebGL 绘图 上 下 文 。 

例 2-1 展示 了 如 何 从 canvas DOM 元 素 中 获取 WebGL 绘图 上 下 文 。getContext() 方法 支持 
两 种 表示 上 下 文 id 的 字符 串 参 数 ，"2d" 参数 用 于 获取 2D Canvas 绘图 上 下 文 (在 第 7 章 讲 
述 )，"webgl" 或 "experimental-webgl"”( 较 老 版 本 的 浏览 器 ) 用 于 获取 WebGL 绘图 上 下 
文 。 新 的 浏览 器 同时 兼容 "experimental-webgl" 和 "webgl" 参数 。 在 示例 代码 中 我 们 使 用 
"experimental-webgl"， 以 确保 它 能 够 兼容 不 同 版 本 的 支持 WebGL 的 浏览 器 。 

例 2-1: 从 canvas 中 获取 WebGL 绘图 上 下 文 


function initWebGL(canvas) { 






































var gl = null; 


var msg = "Your browser does not support WebGL, " + 
"or it is not enabled by default."; 
try 
{ 
gl = canvas.getContext("experimental-webgl"); 
catch (e) 
{ 
msg = "Error creating WebGL Context!: " + e.toString(); 
} 
if (!gl) 
{ 
alert(msg); 
throw new Error(msg); 
} 
return gl; 





注意 示例 中 的 try/catch 代码 块 。 它 非常 重要 ， 因 为 某 些 浏览 器 ， 或 者 某 些 
浏览 器 的 旧版 本 并 不 支持 WebGL。 即 使 浏览 器 支持 WebGL， 浏 览 器 运行 的 
硬件 设备 也 有 可 能 由 于 太 旧 而 无 法 提供 WebGL 绘图 上 下 文 。 故 而 上 述 检 测 
代码 能 帮助 你 在 适当 的 时 机 加 载 降级 方案 (例如 使 用 基于 2D canvas 的 演 染 
方案 ) ， 或 者 至 少 优雅 地 退出 。 
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2.4.2 ” 视 口 


当 你 从 canvas 中 获取 到 一 个 WebGL 绘图 上 下 文 时 ， 需 要 定义 一 个 绘制 区 域 的 矩形 边界 。 


在 WebGL 中 ， 这 个 矩形 边界 被 称 为 视 口 (viewport) 。 在 WebGL 中 ， 设 置 视 口 非常 简单 








只 需 调 用 绘图 上 下 文 的 viewport() 方法 ， 正 如 例 2-2 中 那样 。 


例 2-2: 设置 WebGL 视 口 


function initViewport(gl, canvas) 


€ 
gl.viewport(0, 0, 

} 
注意 这 里 的 gl 对 象 是 由 上 


canvas .width, canvas.height); 





看 定义 的 initWebGL() 函数 生成 的 。 在 这 里 ， 我 们 将 整个 canvas 














区 域 都 定义 为 WebGL 的 视 口 。 


2.4.3 缓冲、 缓冲 数组 和 类 型 化 数组 
现在 我 们 已 经 得 到 了 等 待 绘制 的 WebGL 绘图 上 下 文 。 到 目前 为 止 ， 我 们 所 做 的 事情 和 在 
2D Canvas 上 绘制 图 形 所 需 的 准备 工作 并 没有 多 大 区 别 。 


WebGL 基于 图 元 (primitive) 进行 图 像 绘制 。 所 谓 图 元 ， 是 指 不 同类 型 的 基本 几何 图 形 。 
WebGL 的 图 元 包括 三 角形 、 点 和 线 。 三 角形 是 最 常用 的 图 元 类 型 ， 通 常 使 用 两 种 形式 存 
储 : 三 角形 集 (以 数组 形式 存储 的 三 角形 ) 和 三 角形 条 带 (triangle strip) 4。 图 元 以 数组 的 形 
式 存储 数据 ， 这 个 数组 被 称 为 组 冲 (buffer) ， 待 绘制 的 顶点 数据 在 缓冲 中 被 定义 。 

例 2-3 展示 了 如 何 为 一 个 单位 (1 x 1) 正方 形 创建 顶点 缓冲 。 其 结果 在 一 个 包含 顶点 缓 
冲 数据 的 JavaScript 对 象 中 返回 ， 包 括 顶 点 结构 的 长 度 (在 这 个 示例 中 ， 表 示 顶 点 x、y 
和 z 值 的 每 组 数据 用 三 个 浮 点 数 来 存储 )， 待 绘制 的 顶点 数量 ， 绘 制 这 个 正方 形 时 所 使 用 






































的 图 元 类 型 一 一 在 这 个 示例 中 ， 我 们 使 用 了 三 角形 条 带 。 一 个 三 角形 条 带 定义 了 一 组 连 







































































续 的 三 角形 ， 前 三 个 顶点 表示 第 一 个 三 角形 ， 后 续 的 每 个 三 角形 都 与 前 一 个 三 角形 共用 











其 两 个 顶点 。 





例 2-3: 创建 顶点 缓冲 数据 
// 构建 用 于 绘制 的 正方 形 顶点 数据 


function createSquare(gl) { 























var vertexBuffer; 


vertexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 


var verts = [ 


D3 5, 0 
OO 
| 
i 但 


J; 


.0 
.0 
“0 
.0 


3? 


3? 


gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW); 
var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, 














注 4: 三 角形 条 带 是 一 种 通过 重复 利用 顶点 数据 来 压缩 数据 体积 的 存储 方式 ， 关 于 这 种 存储 方式 ， 请 参照 维 











基 百 科 词 条 http://en.wikipedia.org/wiki/Triangle_strip。 一 一 译 者 注 
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primtype:gl.TRIANGLE_STRIP}; 
return square; 
} 
注意 类 型 Float32Array。 这 是 一 种 浏览 器 专门 为 WebGL 引入 的 新 数据 类 型 。FLoat32Array 
是 一 类 缓冲 数组 (ArrayBuffer) ， 也 称 为 类 型 化 数组 (typed array)。 它 是 一 种 以 二 进 制 方 
式 存 储 的 JavaScript 类 型 。 你 可 以 用 与 访问 普通 数组 相同 的 方式 来 访问 类 型 化 数组 ， 但 访 
问 类 型 化 数组 的 速度 更 快 ， 耗 费 的 内 存 也 更 小 。 由 于 使 用 二 进 制 数据 存储 ， 它 们 是 解决 
性 能 瓶颈 的 理想 存储 方案 。 类 型 化 数组 可 以 被 普遍 使 用 〈 不 仅仅 在 WebGL 中 )， 但 它 是 
WebGL 才 被 引入 浏览 器 的 。 我 们 可 以 在 Khronos 组 织 的 网 站 (https://www.khronos.org/ 
registry/typedarray/specs/latest/) 上 找到 类 型 化 数组 的 最 新 规范 。 


2.4.4 和 矩阵 


在 绘制 正方 形 之 前 ， 我 们 首先 要 创建 一 对 矩阵。 一 个 矩阵 用 于 定义 正方 形 在 3D 坐标 系统 
中 的 位 置 (相对 于 相机 )， 这 个 矩阵 被 称 为 模型 一 视图 矩阵 (ModelView matrix) ， 因 为 它 
同时 包含 模型 矩阵 (模型 位 置 ) 和 视图 矩阵 (相机 位 置 ) 的 信息 。 在 我 们 的 示例 中 ， 我 
们 沿 着 z 轴 负 方向 对 正方 形 进行 了 平移 (即将 它 移动 到 距离 相机 -3.333 个 单位 长 度 的 地 
方 ) ;。 第 二 个 矩阵 被 称 为 投影 矩阵 (projection matrix)， 着 色 器 使 用 它 来 执行 从 3D 空间 坐 
标 到 2D 视 口 绘制 空间 坐标 的 转换 。 在 这 个 示例 中 ， 投 影 矩 阵 定义 了 一 个 45 度 角 视 野 的 透 
视 相 机 (如 果 你 忘 了 什么 是 透视 投影 ， 请 回顾 第 1 章 )。 

在 WebGL 中 ， 和 矩阵 以 类 型 数组 形式 存储 的 一 组 数字 来 表示 。 例 如 一 个 4x4 和 矩阵 使 用 
一 个 包含 16 个 元 素 的 Float32Array 对 象 来 表示 。 为 了 更 方便 地 初始 化 矩阵 和 进行 矩阵 
运算 ,我 们 将 使 用 一 个 叫 gIMatrix 的 开源 库 (https://github.com/toji/gl-matrix)， 这 个 库 
由 现任 Google 工程 师 的 Brandon Jones 编写 。 算 阵 初 始 化 的 代码 如 例 2-4 所 示 。glMatrix 
的 矩阵 统一 以 mat4 类 型 来 表示 ， 通 过 工厂 国 数 mat4.create() 来 创建 矩阵 对 象 。 范 数 
initMatrices() 创建 了 模型 -视图 矩阵 和 投影 矩阵 ， 并 用 全 局 变量 modelViewMatrix 和 
projectionMatrix 来 存储 这 两 个 矩阵 。 

例 2-4: 初始 化 投影 矩阵 和 模型 -视图 矩阵 


var projectionMatrix, modelViewMatrix; 


















































function initMatrices(canvas) 

{ 
// 创建 一 个 模型 -视图 矩阵 ,包含 一 个 位 于 (96，6，-3.333) 的 相机 
modelViewMatrix = mat4.create(); 
mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -3.333]); 


// 创建 一 个 45 度 角 视 野 的 投影 矩阵 

projectionMatrix = mat4.create(); 

mat4.perspective(projectionMatrix, Math.PI / 4， 
canvas.width / canvas.height, 1, 10000); 








注 5: 在 3D 图 形 处 理 中 ， 当 相机 的 位 置 被 移动 时 ， 程 序 实际 进行 的 处 理 是 根据 当前 定义 的 相机 位 置 去 对 整 
个 场景 进行 平移 , 例如 相机 位 于 [0, 0, 3] 位 置 时 , 实际 上 会 被 处 理 为 整个 场景 进行 了 [0, 0, -3] 的 平移 。 
一 一 译 者 注 
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2.4.5 着 色 器 


场景 绘制 的 准备 工作 已 经 差不多 了 。 接 下 来 我 们 要 进行 至 关 重 要 的 初始 化 环节 
正如 先前 所 提 到 过 的 ， 着 色 器 是 一 段 使 用 GLSL (一 种 类 C 的 高 级 语言 ) 编写 的 











; 着 色 器 。 
简短 程序 ， 


它 定 义 了 3D 对象 的 像素 点 实际 绘制 到 屏幕 上 的 方式 。WebGL 要 求 开发 者 为 每 个 待 绘制 的 
对 象 提供 一 个 着 色 器 。 一 个 着 色 器 可 以 应 用 于 多 个 对 象 ， 因 此 在 实际 应 用 中 ， 整 个 场景 通 





























常 只 需 提 供 一 个 统一 的 着 色 器 。 通 过 设置 不 同 的 参数 ， 可 以 在 不 同 的 几何 形状 上 复 用 它 。 


一 个 着 色 器 通常 由 两 个 部 分 组 成 : 顶点 着 色 器 (vertex shader) 和 片段 着 色 器 
shader， 又 称 pixel shader， 像 素 着 色 器 )。 顶 点 着 色 器 负责 将 物体 的 坐标 转换 为 








(fragment 
2D 显示 区 


域 中 的 坐标 ， 片 段 着 色 器 负责 计算 转换 好 的 顶点 像素 的 最 终 颜 色 输 出 ， 甚 基于 颜色 、 纹 


















































理 、 光 照 、 材 质 等 数值 输入 。 我 们 简单 示例 中 的 顶点 着 色 器 包含 顶点 位 置 vertexPos、 模 
型 -视图 矩阵 modelViewMatrix 以 及 投影 矩阵 projectionMatrix 的 数值 ， 这 些 数值 与 输入 





数值 结合 计算 ,构建 出 最 终 的 、 平 移 好 的 顶点 数据 ， 而 片段 着 色 器 则 简单 地 输 
白色 。 


H 设 定好 的 


在 WebGL 中 ， 初 始 化 着 色 器 需要 进行 一 系列 步骤 ， 包 括 将 独立 的 GLSL 源 代码 片段 编译 








到 一 起 并 建立 链接 。 例 2-5 列 出 了 着 色 器 代码 ， 让 我 们 来 通读 这 段 代 码 。 首 先 定义 一 个 辅 





助 函 数 createShader()， 这 个 函数 调用 WebGL 提供 的 方法 来 编译 顶点 着 色 器 条 
器 的 源 代码 。 
例 2-5: 着 色 器 代码 


function createShader(gl, str, type) { 
var shader; 


if (type == "fragment") { 

shader = gl.createShader(gl.FRAGMENT_SHADER); 
} else if (type == "vertex") { 

shader = gL.createShader(gL.VERTEX_SHADER ) ; 
} else { 


return null; 


} 


gl.shaderSource(shader, str); 
gl.compileShader(shader); 


if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 
alert(gl.getShaderInfoLog(shader)); 
return null; 


} 


return shader; 


} 


GLSL 源 代 码 以 JavaScript 字符 串 的 形式 定义 ， 存 储 在 全 局 变量 vertexShade 
fragmentShaderSource 中 : 


var vertexShaderSource = 


attribute vec3 vertexPos;\n" + 
uniform mat4 modelViewMatrix;\n" + 








0 片段 着 色 


rsource 和 





uniform mat4 projectionMatrix;\n" + 

void main(void) {\n" + 

// 返回 经 过 投影 和 变换 的 顶点 值 \n"” + 

gl_Position = projectionMatrix * modelViewMatrix * \n" + 
vec4(vertexPos, 1.0);\n" + 





}\n"; 


var fragmentShaderSource = 
void main(void) {\n" + 
, // 返回 像素 点 的 颜色 :始终 输出 白色 \n" + 
由 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + 
"}\n"; 

















GLSL 代码 由 存储 在 全 局 变量 中 的 JavaScript 字符 串 提 供 。 这 有 点 讨厌 ， 攻 
为 我 们 不 得 不 用 加 号 来 连接 不 同行 ， 来 保证 代码 格式 。 作 为 替代 方案 ， 我 们 
可 以 采用 先 在 外 部 文本 文件 中 定义 着 色 器 ， 然 后 用 Ajax 的 方式 来 加 载 这 个 
文件 。 或 者 我 们 也 可 以 创建 隐藏 的 DOM 节点 ， 然 后 把 代码 写 在 DOM 节点 
的 文本 内 容 中 。 为 了 便于 说 明 ， 我 们 在 示例 代码 中 使 用 了 这 种 最 简单 的 形 
式 。 当 真正 编写 代码 的 时 候 ， 你 可 以 选择 其 他 更 优雅 的 方式 。 












































当 着 色 器 的 各 个 部 分 被 编译 完成 ， 我 们 需要 调用 WebGL 中 的 gl.createProgram()、 
gl.attachShader() 以 及 9gL.LinkProgram() 方法 将 它们 链接 到 同一 段 程序 中 。 随 后 我 们 需要 
调用 gl.getAttribLocation() 和 gl.getUniformLocation() 图 数 获取 GLSL 程序 中 定义 的 各 
个 变量 的 句柄 ， 从 而 可 以 用 JavaScript 中 定义 的 数值 来 初始 化 这 些 变量 。'" initshader() 函 
数 的 定义 如 下 : 

var shaderProgram, shaderVertexPositionAttribute, 


shaderpProjectionMatrixUniform, 
shaderModelViewMatrixUniform; 








function initShader(gl) { 


// 加 载 并 编译 片段 和 顶点 着 色 器 

var fragmentShader = createShader(gl, fragmentShaderSource, 
"fragment"); 

var vertexShader = createShader(gl, vertexShaderSource, 
"vertex"); 





// 将 它们 链接 到 一 段 新 的 程序 中 

shaderProgram = gl.createProgram(); 
gl.attachShader(shaderProgram, vertexShader); 
gL.attachShader(shaderProgram，fragmentShader ); 
gl.linkProgram(shaderProgram); 


// 获取 指向 着 色 器 参数 的 指针 
shaderVertexPositionAttribute = 
gl.getAttribLocation(shaderProgram, "vertexPos"); 











注 6: 这 里 描述 的 是 将 GLSL 中 的 变量 转换 为 JavaScript 变量 的 过 程 ， 从 而 使 得 JavaScript 可 以 向 GLSL 的 变 
量 注入 一 些 配置 参数 。 一 一 译 者 注 
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gl.enableVertexAttribArray(shaderVertexPositionAttribute); 


sh 


sh 


aderprojectionMatrixUniform = 
gl.getUniformLocation(shaderProgram, "projectionMatrix"); 
aderModelViewMatrixUniform = 
gl.getUniformLocation(shaderProgram, "modelViewMatrix"); 


if (!gl.getProgramparameter(shaderProgram, 


} 


gl.LINK_STATUS)) { 
alert("Could not initialise shaders"); 


2.4.6 绘制 图 元 
现在 ， 我 们 已 经 为 绘制 正方 形 做 好 了 全 部 的 准备 工作 一 一 我 们 创建 了 绘图 上 下 文 ， 设置 了 
视 口 ; 顶点 缓冲 、 和 矩阵 和 着 色 器 也 都 已 创建 和 初始 化 。 下 面 我 们 定义 一 个 函数 draw()， 用 
它 来 绘制 我 们 在 上 文中 展示 过 的 那个 正方 形 。 让 我 们 来 通读 这 个 函数 。 
首先 ，draw() 函数 以 黑色 背景 填充 的 方式 清空 了 整个 画布 ， 方 法 gl.clearColor() 将 黑色 
设 为 当前 画布 的 “清空 ”颜色 。 这 个 方法 携带 四 个 参数 ， 分 别 代 表 RGBA (Red、Green、 
的 四 个 分 量 。 注 意 WebGL 的 RGBA 值 是 用 0.0 到 1.0 范围 的 浮 点 数 来 





Blue、 Alpha) 颜色 


表示 的 (这 与 用 0~ 
使 用 定义 的 “清空 ”颜色 来 









































255 的 整数 表示 的 Web 颜色 值 不 一 样 ， 例 如 在 CSS 中 )。gl.clear() 
“清空 ”WebGL 颜色 缓冲 (color buffer)， 即 GPU 显存 中 用 


于 泻 染 屏 幕 上 像素 点 的 区 域 。”[WebGL 使 用 多 种 类 型 的 给 冲 (buffer) 来 进行 绘制 ， 包 括 


以 说 明 。] 























其 次 ，draw() 国 数 将 正方 形 的 顶点 缓冲 数据 绑 定 到 绘图 上 下 文 的 缓冲 ， 设 定 了 图 





程 中 将 要 使 用 的 着 色 器 ， 并 建立 顶点 缓冲 数据 和 和 矩阵 与 着 色 器 之 间 的 关联 。 


最 后 ， 我 们 调用 WebGL 的 drawArrays() 函数 来 绘制 这 个 正方 形 。WebGL 通过 传 入 的 图 元 
类 型 参数 和 图 元 的 顶点 数量 参数 ， 并 结合 之 前 预 设 的 其 他 属性 (顶点 、 和 矩阵 、 着 色 器 ) 来 
得 到 最 终 的 绘制 结果 。 例 2-6 展示 了 整个 流程 。 








例 2-6: 绘制 代码 


function draw( 

















gl, obj) { 





// 清空 背景 (使 用 黑色 填充 ) 





gl.clearCo 
gl.clear(g 


// 设置 待 绘制 的 顶点 缓冲 


gl.bindBuf 


// 设置 待 月 
gl.useProg 


lor(0.0, 0.0, 0.0, 1.0); 
1.COLOR_BUFFER_BIT); 





fer(gl.ARRAY_BUFFER, obj.buffer); 





目的 着 色 器 


ram(shaderProgram); 








注 7: 指 将 颜色 缓冲 中 的 所 有 字 节 都 设 为 指定 的 “清空 ”颜色 。 一 一 译 者 注 














颜色 缓冲 和 用 于 深度 测试 的 深度 缓冲 《depth buffer)。 关 于 深度 缓冲 ， 我 们 将 在 下 一 节 予 


元 绘制 过 
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// 建立 着 色 器 参数 之 间 的 关联 :顶点 和 投影 /模型 矩阵 

gl.vertexAttribPpointer(shaderVertexPositionAttribute, 
obj.vertSize, gl.FLOAT, false, 0, 0); 

gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, 
projectionMatrix); 

gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, 
modelViewMatrix); 





// 绘制 物体 
gl.drawArrays(obj.primtype, 0, obj.nVerts); 
} 


终于 ， 我 们 完成 了 整个 绘制 流程 。 程 序 执行 的 结果 是 一 个 绘制 在 黑色 背景 上 的 白色 正方 
形 ， 如 之 前 图 2-1 所 示 的 那样 。 


2.5 创建 3D 几 何 体 


上 面 绘制 的 正方 形 是 一 个 尽 可 能 简单 的 WebGL 示例 。 显 然 它 不 怎么 能 引起 你 的 兴趣 ， 甚 
至 还 不 是 3D 的 一 一 尽管 为 了 绘制 这 个 正方 形 ， 我 们 已 经 编写 了 将 近 200 行 代码 。 而 实现 
同样 效果 的 2D Canvas 绘制 代码 顶 多 只 需 30 行 左右 。 在 这 一 点 上 ，WebGL 相对 其 他 绘 医 
API 没有 显示 出 优势 。 但 别 着 急 ， 现 在 我 们 来 用 WebGL 做 一 些 有 趣 的 事情 一 一 真正 的 3D 
绘图 。 为 了 得 到 一 个 包含 不 同 颜色 的 3D 立方 体 ， 我 们 需要 在 正方 形 的 基础 上 加 一 些 线条 ， 
为 此 我 们 将 对 着 色 器 和 绘图 函数 做 一 些小 改动 。 我 们 还 要 为 这 个 立方 体 加 上 一 个 简单 的 动 
画 ， 以 便 从 各 个 角度 去 观察 它 。 图 2-2 展示 了 一 个 旋转 中 立方 体 的 屏幕 截图 。 











































































































2-2: 一 个 包含 不 同 颜色 的 立方 体 
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为 了 创建 和 泻 染 这 个 立方 体 ， 我 们 将 改进 之 前 的 示例 代码 。 首 先 ， 我 们 将 用 于 创建 正方 形 
的 缓冲 数据 改 为 用 于 创建 立方 体 的 缓冲 数据 。 其 次 ， 我 们 将 使 用 与 之 前 不 同 的 WebGL 国 
数 来 执行 绘制 过 程 。 文 件 Chapter 2/example2-2.html 中 包含 绘制 立方 体 的 完整 代码 。 


例 2-7 展示 了 立方 体 的 缓冲 设置 过 程 ， 它 比 绘制 正方 形 的 代码 要 复 
的 顶点 ， 并 且 我 们 将 为 不 同 的 


存储 如 


AR 是 - 





LL 之 里 


妙 一 上 


杂 一 些 。 立 方 体 有 更 多 





vertexBuffer 中 。 





设置 不 同 的 颜色 。 首 先 ， 我 们 创建 顶点 缓冲 数据 ， 并 将 它 








例 2-7: 初始 化 立方 体 、 颜 色 和 索引 缓冲 的 代码 


// 为 彩 


// 


Var 





顶点 数据 


vertexBuffer ; 


色 的 立方 体 构建 顶点 . 颜 
function createCube(gL) { 


色 和 索引 数据 





vertexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 


Var 


verts = [ 


/ 正面 


/ 
-1.0，- 


3 


0 
<0; 

0 

0 


P22 
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» 


gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW); 
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hs 
草 


其 次 ， 创 建 颜色 数据 ， 为 每 个 顶点 设置 一 个 四 元 色 ， 并 将 甚 存储 在 变量 coLorBuffer 中 。 
faceColors 数组 中 是 一 系列 定义 好 的 RGBA 颜色 值 。 


最 后 ， 我 们 要 











// 颜色 数据 
var colorBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 




















var faceColors = [ 
[1.0, 0.0, 0.0，1.0]，// 正 再 
[0.0，1.0，0.0，1.0]，// 音 
[0.0，0.0，1.0，1.0]，// 顶 面 
[1.0，1.0，0.0，1.0]，// 底面 
[1.0，0.0，1.0，1.0]，// 右面 
[0.0，1.0，1.0，1.0] // 左面 





J; 
var vertexColors = []; 
for (var i in faceColors) { 
var color = faceColors[i]; 
for (var j=0; j < 4; j++) { 
vertexColors = vertexColors.concat(color); 
} 
} 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexColors), 
gL.STATIC_DRAW) ; 


创建 一 类 新 型 的 缓冲 一 一 索引 缓冲 (index buffer) ， 用 于 存储 顶点 数据 的 索 


引 。 我 们 将 这 些 数据 存储 在 变量 cubeIndexBuffer 中 。 之 所 以 这 里 样 做 ， 是 因为 我 们 将 在 


更 新 过 的 draw() 函数 中 




















是 : 3D 几何 

















缓冲 能 够 避免 数据 重复 ， 令 数据 存储 更 加 紧凑 。 


} 


为 了 绘制 立方 体 的 颜色 ， 这 些 颜色 必须 被 传递 给 着 色 器 。 
码 。 广 意 加 粗 的 代码 行 : 


// 索引 数据 (定义 待 绘制 的 三 角形 ) 
var cubeIndexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer); 
var cubeIndices = [ 

0，1，2， 0，2，3， // 正面 

4，5，6， dG // 背面 

8, 9, 10, 8，10，11， // 顶 面 

12，13，14， 12，14，15，// 底面 

16，17，18， 16，18，19，// 右面 

20，21，22， 20，22，23 // 左面 





] ; 
gL.bufferData(gL.ELEMENT_ARRAY_BUFFER，new Uint16Array(cubeIndices), 
gL.STATIC_DRAW) ; 


var cube = {buffer:vertexBuffer, colorBuffer:colorBuffer, 
indices:cubeIndexBuffer, 
vertSize:3, nVerts:24, colorSize:4, nColors: 24, nIndices:36, 
primtype:gl.TRIANGLES}; 
return cube; 


使 用 顶点 集 索 引 而 非 顶 点 本 身 来 定义 所 有 的 三 角形 。 这 样 做 的 到 
图 形 往往 代表 了 连续 封闭 的 区 域 ， 单 个 顶点 常常 由 多 个 三 角形 共享 ， 而 索引 


2 





由 





例 2-8 展示 了 改进 后 的 着 色 器 代 
我 们 声明 了 一 个 代表 顶点 颜色 的 属性 。 此 外 我 们 还 需要 声明 一 个 
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GLSL 中 的 varying 变量 一 一 vcolor， 它 用 于 将 每 个 顶点 的 颜色 信息 从 顶点 着 色 器 传递 到 
片段 着 色 器 。 与 之 前 出 现 过 的 并 不 逐个 更 改 顶 点 数据 的 uniforn 变量 (例如 我 们 早先 讨论 
的 矩阵 ) 不 同 ，varying 变量 代表 着 色 器 会 为 每 个 顶点 逐个 输出 不 同 的 值 。 在 这 个 示例 中 ， 
我 们 将 存储 在 vertexColor 变量 中 的 颜色 缓冲 数据 输入 到 变量 vcolor 中 。 片 段 着 色 器 直接 
输出 vCotor 中 的 原始 颜色 值 。 


例 2-8: 用 于 演 染 带 颜 色 正方 体 的 着 色 器 代码 


var vertexShaderSource = 











attribute vec3 vertexPos;\n" + 
. attribute vec4 vertexColor;\n" + 
uniform mat4 modelViewMatrix;\n" + 
uniform mat4 projectionMatrix;\n" + 
机 varying vec4 vColor;\n" + 
void main(void) {\n" + 
// 返回 经 过 变换 和 投影 的 顶点 值 \n"” + 
gl_Position = projectionMatrix * modelViewMatrix * \n" + 
vec4(vertexPos, 1.0);\n" + 
到 // Output the vertexColor in vColor\n" + 
册 vColor = vertexColor;\n" + 


}\n"; 





< 
[aD 
- 


fragmentShaderSource = 
precision mediump float;\n" + 
时 varying vec4 vColor;\n" + 
void main(void) {\n" + 
// 返回 像素 点 颜色 :始终 输出 白色 \n" + 
辆 gl_FragColor = vColor;\n" + 


"}\n"; 
如 果 仅 仅 用 于 设置 单一 的 颜色 ， 这 上 段 代 码 看 起 来 也 许 有 点 过 于 复杂 。 但 一 个 
复杂 的 着 色 器 一 一 例如 一 个 实现 了 光照 模型 的 着 色 器 ,或 者 一 个 实现 了 草 
地 、 水 面 动态 纹理 的 着 色 器 ， 等 等 一 一 在 输出 最 终 色彩 之 前 ， 会 对 vcolor 
进行 许多 额外 的 运算 处 理 。 无 疑 ， 着 色 器 提供 了 强大 的 视觉 能 力 ， 但 是 正如 
Ben Parker 的 名 言 所 述 能 力 越 大 ， 责 任 越 大 。 
































现在 我 们 开始 编写 用 于 绘制 的 代码 ， 如 例 2-9 所 示 。 为 了 绘制 比 正 方形 更 为 复杂 的 立方 体 ， 
我 们 需要 做 一 些 不 同 的 事 。 示 例 代 码 中 加 粗 的 部 分 标明 了 这 些 改 动 。 首 先 ， 我 们 要 开启 深 
度 测 试 ， 使 得 WebGL 可 以 按 深度 排序 来 绘制 3D 物体。 否则，WebGL 将 无 法 保证 将 “在 
前 方 ” 的 面 按照 我 们 的 预期 绘制 在 其 他 面 的 前 方 ,“ 前 方 ”和 “后 方 ”的 面 会 混 靖 在 一 起 。 
(如 果 想 看 看 关闭 深度 测试 会 发 生 什么 事 ， 只 需 注释 掉 那 行 代码 。 你 仍然 会 看 到 立方 体 的 
部 分 面 ， 但 不 完整 。) 

其 次 ， 我 们 要 将 之 前 已 经 在 createCube() 函数 中 创建 好 的 颜色 和 索引 缓冲 绑 定 到 绘图 上 下 
文 的 缓冲 。 最 后 ， 我 们 调用 WebGL 方法 gl.drawElements() 而 不 是 gl.drawArray() 来 绘制 
用 索引 缓冲 来 表示 的 图 元 信息 。 


















































例 2-9: 更 改 后 的 立方 体 绘制 代码 


function draw(gl, obj) { 


// 


gl. 
.enabLe(g9L.DEPTH_TEST) ; 
.cLear(gL.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 














青空 背景 (使 用 黑色 填充 ) 
clearColor(0.0, 0.0, 0.0, 1.0); 








设置 待 用 的 着 色 器 


.UseProgram(shaderProgram); 





// 建立 着 色 器 参数 之 间 的 关联 :顶点 和 投影 /模型 矩阵 
// 设置 缓冲 


gl. 
gl. 


gl. 
.vertexAttribPpointer(shaderVertexColorAttribute, 


gl 


gl. 


gl 


gl. 


// 


gl. 


bindBuffer(gl.ARRAY_BUFFER, obj.buffer); 
vertexAttribpointer(shaderVertexPositionAttribute, 
obj.vertSize, gl.FLOAT, false, 0, 0); 
bindBuffer(gl.ARRAY_BUFFER, obj.colorBuffer); 


obj.colorSize, gl.FLOAT, false, 0, 0); 
bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices); 


.uniformMatrix4fv(shaderProjectionMatrixUniform, false, 


projectionMatrix); 
uniformMatrix4fv(shaderModelViewMatrixUniform, false, 
modelViewMatrix); 


绘制 物体 


drawElements(obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0); 


2.6 添加 动画 


如 果 和 希望 看 到 立方 体 的 3D 效果 而 不 是 一 个 静止 的 2D 图 像 ， 我 们 需要 让 它 动 起 来 。 现 在 ， 























我 们 来 为 这 个 立方 体 添加 一 个 绕 坐 标 轴 旋转 的 简单 动画 。 动 画 的 代码 如 例 2-10 所 示 。 在 函 














数 animate() 中 ， 立 方 体 以 五 秒 钟 为 周期 围绕 预先 定义 的 旋转 轴 rotationAxis 旋转 。 


animate() 由 另 一 个 国 数 run() 和 循环 调用 ， 


它 调 用 一 个 新 的 浏览 器 函数 


requestAnimationFrame() 来 持续 驱动 动画 。 这 个 函数 在 每 次 浏览 器 重 ns 











取 一 个 回调 函数 。( 关 于 这 个 函数 以 及 其 他 动画 相关 的 技术 ， 后 续 的 章 闻 里 有 更 详细 
的 说 明 。) 每 次 animate() 函数 被 调用 的 时 候 ， 它 都 会 计算 当前 时 间 和 上 次 调用 该 
数 的 时 间 之 间 的 差 值 ， 并 将 其 存储 在 变量 deltat 中 ， 然 后 根据 它 计 算出 作用 于 矩阵 























变量 modelViewMatrix 的 旋转 角度 。 代 码 执 行 的 结 
rotationAxis 旋转 。 


例 2-10: 为 立方 体 添加 动画 
var duration = 5000; // 毫秒 (ms) 
var currentTime = Date.now(); 
function animate() { 
var now = Date.now(); 
var deltat = now - currentTime; 

















吉 果 是 立方 体 以 每 五 秒 一 圈 的 速度 绕 
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currentTime = now; 

var fract = deltat / duration; 

var angle = Math.PI * 2 * fract; 

mat4.rotate(modelViewMatrix, modelViewMatrix, angle, rotationAxis); 


} 
function run(gl, cube) { 


requestAnimationFrame(function() { run(gl, cube); }); 
draw(gl, cube); 
animate(); 


} 


2.7 ”使 用 纹理 映射 


纹理 映射 是 我 们 在 本 章 要 学 习 的 最 后 一 个 WebGL API 特性 。 绞 理 映射 (texture map), 或 
简称 纹理 ， 是 指 覆盖 几何 体 表 面 显示 的 位 图 。WebGL 中 使 用 Image DOM 元 素 作 为 纹理 数 
据 的 源 ， 这 表示 ， 只 需 简单 地 更 改 Image 元 素 的 src 属性 ， 你 就 可 以 将 Web 图 像 格 式 ， 例 
如 JPEG 和 PNG， 作 为 WebGL 贴图 了 。 












































WebGL 纹理 并 不 一 定 要 以 图 像 文件 为 源 来 构建 。2D canvas 元 素 也 可 以 作为 
纹理 的 源 ， 利 用 这 个 特性 ， 我 们 可 以 使 用 2D Canvas 绘图 API 在 3D 物体 的 
表面 绘制 图 案 ; 纹理 其 至 还 可 以 以 Vedio 元 素 作 为 源 来 构建 ， 因 此 你 可 以 在 
一 个 3D 物体 的 表面 播放 视频 。 关 于 动态 纹理 的 能 力 ， 在 第 11 章 有 更 详细 的 
说 明 。 
























































我 们 将 前 面 的 旋转 立方 体 示例 改 为 使 用 纹理 映射 而 非 表 面色 彩 。 如 图 2-3 所 示 。 


























2-3: 一 个 使 用 了 纹理 映射 的 立方 体 
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这 里 需要 提醒 各 位 读者 ， 如 果 你 直接 在 文件 系统 里 双击 打开 纹理 映射 的 代码 
示例 页 面 ， 它 是 无 法 正常 运行 的 。 它 需要 用 一 个 Web 服务 器 来 加 载 ， 因 为 
我 们 从 一 个 JPEG 文件 中 载 和 纹理， 这 是 由 于 WebGL 安全 模型 中 的 跨 域 访 
问安 全 限制 ， 我 们 需要 运行 一 个 Web 服务 器 而 非 直接 通过 file:// URL 来 访问 
这 个 文件 。 总 的 来 说 ， 本 书 中 的 大 多 数 例子 都 需要 通过 Web 服务 器 来 访问 。 


我 在 MacBook 上 运行 了 一 个 标准 本 地 版] LAMP 环境 ， 不 过 你 需要 用 到 的 仅 
仅 是 LAMP 的 一 部 分 功能 文 样 的 Web 服务 。 或 者 如 果 你 的 机 
器 上 装 了 Python， 你 也 可 以 利用 Python 内 置 的 SimpleHTTPServer 模块 来 启 
动 一 个 Web 服务 ， 使 用 命令 行 窗 口 定 位 到 examples 目录 ， 然 后 输入 : 
python -m SimpleHTTPServer 
这 样 你 就 可 以 通过 http://localhost:8000/ 这 个 地 址 来 访问 本 书 的 示例 了 。 如 果 
希望 获取 更 多 关于 这 方面 的 技术 支持 ， 请 访问 Linux Journal 网 站 (http://bit. 
ly/linuxjournal-http-python ) 。 



















































































这 个 示例 的 完整 代码 在 文件 Chapter 2/example2-3.html 中 。 例 2-11 展示 了 加 载 纹理 的 代码 。 

首先 ， 我 们 调用 gl.createTexture() 来 创建 一 个 新 的 WebGL 纹理 对 象 。 然 后 将 这 个 纹理 
对 象 的 image 属性 设 为 一 个 新 创建 的 Image 对 象 。 最 后 ， 将 这 个 Image 对 象 的 src 属性 设 
为 一 个 JPEG 文件 的 路 径 一 一 在 这 个 示例 中 ， 我 们 加 载 了 一 个 256 x 256 的 正方 形 WebGL 
“过 首先 我 们 要 为 图 像 的 onload 事件 注册 一 个 事件 处 理 程序 ， 以 便 在 图 像 
加 载 完毕 的 时 候 对 WebGL 纹理 对 象 做 一 些 处 理 。 


例 2-11: 从 图 像 创建 一 个 纹理 映射 


var okToRun = false; 



















































































function handleTextureLoaded(gl, texture) { 
gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, 

texture.image); 

gl. texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
gl.bindTexture(gl.TEXTURE_2D, null); 
okToRun = true; 


} 
var webGLTexture; 


function initTexture(gl) { 
webGLTexture = gl.createTexture(); 
webGLTexture.image = new Image(); 
webGLTexture.image.onload = function () { 
handleTextureLoaded(gl, webGLTexture) 
} 


webGLTexture.image.src = "../images/webgl-logo-256.jpg"; 
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在 onLoad 事件 的 回调 函数 handleTextureLoaded() 中 ， 我 们 做 了 下 面 这 些 事情 。 首 先 ， 我 
们 调用 gl.bindTexture() 函数 来 指定 WebGL 在 后 续 绘 制 过 程 中 将 要 使 用 的 纹理 。 被 指定 
的 纹理 将 在 后 续 的 整个 绘制 过 程 中 生效 ， 直 到 gl.bindTexture() 再 次 被 调用 一 一 在 函数 的 
末尾 ， 我 们 将 绑 定 纹理 设置 为 空 ， 以 防止 在 后 续 操作 中 意外 更 改 纹理 存储 区 域 的 内 容 。 


其 次 ， 我 们 调用 gl.pixelstorei() 函数 来 翻转 所 有 纹理 像素 点 的 y 坐标 值 。 之 所 以 需要 进 
行 这 个 操作 ， 是 因为 在 WebGL 中 ,纹理 坐标 系 的 y 轴 是 垂直 向 上 的 ， 而 在 Web 图 像 本 身 
的 坐标 系 中 , y 轴 是 垂直 向 下 的 。 


gl.pixelstorei() 函数 名 中 的 字母 i 代表 整 型 数 (integer)，WebGL 的 函数 
命名 规范 参照 OpenGL， 通 常 以 一 个 字母 后 缀 来 标识 函数 参数 的 类 型 。 图 像 
以 整 型 数组 的 方式 存储 (RGB 或 RGBA 颜色 )， 因 此 被 标识 为 i。 














































































































现在 我 们 调用 texImage2D() 方法 来 将 加 载 好 的 图 像 数据 复制 到 WebGL 纹理 对 象 中 。 这 
个 方法 支持 几 种 不 同类 型 的 参数 ， 你 可 以 查阅 WebGL 规范 了 解 如 何 使 用 它 创 建 不 同类 型 
的 纹理 。 在 这 个 示例 中 ， 我 们 在 第 0 层 创建 了 一 个 2D 纹理 一 一 一 个 纹理 中 可 以 包含 不 同 
层级 的 纹理 ， 这 个 技术 被 称 为 mip-mapping， 我 们 将 在 后 面 进行 介绍 这 个 纹理 采用 了 
RGBA 颜色 模式 ， 存 储 在 一 个 无 符号 字 节 (unsigned byte) 数组 中 。 


我 们 还 需要 设置 纹理 过 滤 选 项 ， 这 些 选项 用 于 控制 图 像 随 远近 位 置 放 大 缩小 时 的 纹理 像素 
颜色 计算 。 在 我 们 的 示例 中 ， 我 们 使 用 了 最 简单 的 过 滤 设 置 一 一 gl.NEAREST， 这 个 设置 的 
策略 是 通过 缩放 图 像 本 身 来 得 出 纹理 像素 点 的 颜色 。 在 这 个 设置 下 ,纹理 在 没有 被 过 度 
缩放 的 前 提 下 看 起 来 效果 还 不 错 ， 但 过 近 处 (放大 ) 会 呈现 块 状 和 像素 化 效果 ， 而 过 远 
处 (缩小 ) 会 呈现 锯齿 和 不 平滑 效果 。WebGL 提供 了 另外 两 种 纹理 过 滤 能 力 : gl.LINEAR 
是 使 用 线性 插值 的 方法 来 处 理 放 大 ， 使 得 放大 后 纹理 的 视觉 效果 更 加 平滑 ，gl.LINEAR_ 
MIPMAP_NEAREST 用 于 添加 mip-map 过 滤 ， 使 得 远 处 物体 的 纹理 看 起 来 更 平 背 。 


想 要 感受 gl.NEAREST 过 滤 的 缺 点 ， 可 以 尝试 调整 立方 体 的 位 置 。 修 改 源 文件 Chapter 2/ 

example2-3.html 的 第 47 行 ， 修 改 立 方 体 z 坐标 的 值 (当前 为 -8)， 调整 立方 体 的 远近 。 
mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -8]); 

尝试 将 -8 改 为 -4。 当 立方 体 更 加 靠近 观察 点 ， 你 可 以 观察 到 立方 体 的 纹理 明显 变 得 像素 

化 了 (图 2-4)。 

现在 再 尝试 将 -8 改 成 -32。 当 立方 体 远离 观察 点 时 候 ， 可 以 看 到 纹理 出 现 了 明显 的 锯齿 

(图 2-5)。 
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图 2-4: gl.NEAREST 过 滤 一 一 近 处 物体 上 的 纹理 变 得 像素 化 

















图 2-5: gl.NEAREST 过 滤 一 一 较 远 物体 的 纹理 出 现 锯齿 
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现在 ， 我 们 已 经 设置 好 了 全 部 的 纹理 选项 ， 并 调用 gl.bindTexture() 方法 来 清空 当前 绑 定 
的 纹理 。 最 后 ， 我 们 将 全 局 变量 okToRun 的 值 设 为 true， 以 此 通知 run() 国 数 纹理 已 经 准 
备 就 绪 ， 绘 图 程序 可 以 开始 运行 了 。 
像 往常 一 样 ， 我 们 还 需要 对 代码 的 其 他 部 分 进行 更 改 : 缓冲 的 创建 代码 ， 着 色 器 代码 ， 以 
及 着 色 值 的 设置 代码 。 首 先 ， 我 们 将 创建 颜色 缓冲 的 代码 替换 为 创建 纹理 缓冲 的 代码 。 纹 
理 坐 标 (texture coordinate) 用 随 顶 点 数据 一 同 定 义 的 、[0, 1] 范围 内 的 一 对 浮 点 数 来 表示 。 
这 对 浮 点 数 对 应 位 图 上 的 x、y 偏 移 量 ， 正 如 下 面 着 色 器 的 代码 中 所 展现 的 那样 。 对 我 们 的 
立方 体 来 说 ,纹理 坐标 值 非常 简单 : 我 们 把 整 张 纹 理 分 别 贴 到 立方 体 的 每 个 表面 上 ， 因 此 
立方 体 每 个 面 的 转角 坐标 恰好 对 应 纹理 图 像 的 转角 坐标 ， 如 [0, 0]、[0, 1]、[1, 0] 或 [1, 1]。 
注意 ， 这 些 纹理 坐标 值 的 顺序 与 顶点 缓冲 中 的 顶点 顺序 是 相对 应 的 。 例 2-12 展示 了 创建 纹 
理 坐 标 缓冲 的 代码 。 


例 2-12: 纹理 映射 立方 体 的 缓冲 创建 代码 
var texCoordBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); 
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var textureCoords = [ 


// 正 











0.0，1.0， 
]; 
gL.bufferData(gL.ARRAY_BUFFER，new FLoat32Array(textureCoords ) ， 
gL.STATIC_DRAW) ; 


我 们 还 要 将 使 用 色彩 的 着 色 器 更 改 为 使 用 纹理 的 着 色 器 。 在 顶点 着 色 器 中 ， 我 们 定义 了 一 
个 名 为 texcoord 的 顶点 属性 变量 ， 顶 点 数据 通过 这 个 变量 传人 ， 以 及 一 个 varying 类 型 




















的 输出 变量 vTexCoord， 用 于 向 片段 着 色 器 输出 各 个 顶点 的 信息 。 片 段 着 色 器 使 用 纹理 坐 
标 作 为 纹理 映射 数据 的 索引 ， 纹 理 坐 标 通过 uniforn 变量 uSampler 传人 程序 。 我 们 调用 
GLSL 函数 texture2D() 从 纹理 中 取得 像素 信息 ， 包 括 采 样 器 和 以 (x, y) 形式 存储 的 2D 顶 
































点 位 置 。 更 改 后 的 着 色 器 代码 如 例 2-13 所 示 。 
例 2-13: 纹理 映射 立方 体 的 着 色 器 代码 


var vertexShaderSource = 


attribute vec3 vertexPos;\n" + 
attribute vec2 texCoord;\n" + 
uniform mat4 modelViewMatrix;\n" + 
uniform mat4 projectionMatrix;\n" + 
Varying vec2 vTexCoord;\n" + 

void ee {\n" + 


" // 返回 经 过 变换 和 投影 的 顶点 值 \n" + 














vec4(vertexPpos, 1.0);\n" + 
// Output the texture coordinate in vTexCoord\n" + 
vTexCoord = texCoord;\n" + 


}\n"; 


var fragmentShaderSource = 

2 precision mediump float;\n" + 
Varying vec2 vTexCoord;\n" + 
uniform sampler2D uSampler;\n" + 
void main(void) {\n" + 


” // 返回 像素 点 的 颜色 :始终 输出 白色 \n" + 











"}\n"; 




















gl_Position = projectionMatrix * modelViewMatrix * \n" 


蔗 





+ 


gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));\n" + 


为 了 将 纹理 贴 到 我 们 的 立方 体 上 ， 我 们 最 后 还 要 对 绘制 函数 做 一 些小 修改 。 例 2-14 展示 了 
修改 后 的 代码 。 我 们 将 设置 颜色 缓冲 的 代码 替换 为 设置 纹理 缓冲 的 代码 ， 并 将 该 纹理 设 为 


























当前 纹理 ， 绑 定 到 绘图 上 下 文 。 
例 2-14: 初始 化 绘制 所 需 的 纹理 映射 数据 

















9gL.verteXxAttribPointer(shaderTexCoordAttribute，obj.texCoordSize，9L.FLOAT， 


false, 0, 0); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices); 


gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix); 
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix); 


gl.activeTexture(gl.TEXTUREO); 
gl.bindTexture(gl.TEXTURE_2D, webGLTexture); 
gl.uniformii(shaderSamplerUniform, 0); 
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2.8 ”小结 


本 章 讲述 了 如 何 使 用 WebGL API 进行 图 形 演 染 。 我 们 了 解 了 编写 一 个 WebGL 应 用 的 基 
本 流程 ， 包 括 创建 绘图 上 下 文 、 视 口 、 缓 冲 、 和 矩阵 、 着 色 器 和 图 元 的 绘制 。 我 们 学 习 了 如 
何 创 建 2D 和 3D 几何 图 形 并 用 颜色 和 纹理 来 填充 它们 。 我 们 还 稍微 借助 了 开源 库 glIMatrix 
和 RequestAnimationFrame.js， 它 们 都 是 WebGL 开发 的 常用 基本 库 。 


显然 ， 到 目前 为 止 我 们 接触 到 的 WebGL 底层 编程 是 非常 系 琐 的 。 在 读 完 本 章 之 后 ， 我 们 
已 经 可 以 编写 一 些 稍微 复杂 的 、 包 括 颜 色 和 纹理 的 几何 图 形 ， 尽 管 为 此 可 能 需要 编写 数 百 
行 代码 。 这 提供 了 强大 的 能 你 可 以 精细 地 操作 屏幕 上 的 每 一 个 顶点 和 像素 ， 以 令 人 
炫目 的 硬件 加 速 的 速度 进行 。 然 而 使 用 WebGL 底层 接口 来 编写 代码 需要 大 量 繁重 的 工作 。 
标准 的 设计 者 们 采用 了 牺牲 代码 尺寸 来 换取 更 强大 能 力 的 思路 。WebGL 的 API 小 而 简单 ， 
这 就 使 得 更 多 工作 落 在 了 应 用 开发 者 身上 。 


如 果 你 是 一 名 经 验 丰富 的 游戏 或 图 形 开 发 者 ， 并 且 和 希望 更 好 地 掌控 应 用 的 性 能 和 特性 ， 
那么 直接 使 用 WebGL API 对 你 来 说 也 许 是 最 好 的 选择 。 如 果 你 正在 开发 的 应 用 对 泻 染 
有 特别 的 需求 ， 例 如 图 像 处 理应 用 或 3D 建 模 工具 ， 那 么 你 应 该 深入 地 研究 WebGL 中 的 
metal 技术 。 又 或 许 ， 你 需要 开发 一 些 更 顶层 的 应 用 ， 例 如 谁 也 不 希望 为 了 创建 一 个 立方 
体 而 重复 写 那 四 十 行 相同 的 代码 ， 在 这 个 层次 上 你 得 完全 靠 自己 ， 你 需要 理解 和 控制 每 
一 行 代码 。 

尽管 如 此 ， 如 有 果 你 和 大 多 数 人 一 样 对 3D 并 不 是 特别 熟悉 ， 那 么 你 应 该 以 一 种 比 WebGL 
API 本 身 更 高 级 的 封装 方式 来 编写 应 用 ， 例 如 使 用 一 些 现成 的 工具 。 事 实 上 这 些 工具 已 经 
存在 : 有 许多 基于 WebGL 的 优秀 开源 库 可 供 使 用 。 我 们 将 在 后 面 的 几 音 一 一 介绍 它们 。 
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我 们 在 上 一 章 展示 了 WebGL 编程 的 强大 和 繁琐 。WebGL 允许 你 使 用 GPU 全 部 的 能 

来 创建 美丽 的 实时 泻 染 、 带 动画 的 Web 页 面 。 然 而 如 果 你 希望 用 这 些 最 基础 的 API 去 做 
一 些 令 人 惊叹 的 事 ， 那 么 你 将 需要 付出 大 量 的 努力 ， 并 逐 行 编写 所 需 的 成 百 上 千 行 代 码 。 
在 这 个 以 快 为 主 的 Web 时 代 ， 这 样 的 方式 显然 不 适合 用 于 构建 应 用 。 面 对 项 目 需求 ， 大 
多 数 的 开发 者 面临 着 两 个 选择 : 创建 自己 的 辅助 库 来 提升 开发 效率 ， 或 者 使 用 现成 的 第 
三 方 库 。 

而 可 用 于 辅助 展开 WebGL 开发 的 第 三 方 库 同样 有 很 多 ， 考 庸 置疑 ，Three.js (http://threejs. 
org/) 是 它们 中 的 领导 者 。Three.js 提供 了 一 套 简易 且 直 观 的 创建 3D 图 形 中 常见 物体 的 方 
案 。 它 使 用 了 许多 最 佳 实践 的 图 形 引 擎 技术 ， 速 度 很 快 。 它 还 内 置 了 多 种 类 型 的 对 象 和 方 
便 的 工具 ， 功 能 非常 强大 。Three,js 是 托管 在 GitHub 上 的 开源 项 目 并 且 维 护 良好 ， 许 多 作 
者 都 在 向 这 个 项 目 贡献 代码 。 

Three.js 已 经 成 为 WebGL 开发 的 事实 选择 。 你 在 互联 网 上 能 看 到 的 大 多 数 WebGL 优秀 内 
容 都 是 使 用 Three.js 来 构建 的 ， 包 括 Google 的 100 000 Stars ( 见 第 1 章 )， 以 及 许多 可 以 
通过 互联 网 访问 到 的 富 交 互 和 高 度 创新 的 杰作 。 


3.1 使 用 Three.js 创 建 的 代表 性 项 目 


现今 最 广为人知 的 WebGL 项 目 莫 过 于 RO.ME “3 Dreams of Black” 人。 ee 
它 是 电影 制作 人 Chris Milk 于 2011 年 在 Google 工程 师 的 帮助 下 创建 的 一 个 交互 式 音乐 作 
品 。 这 是 Danger Mouse 和 Daniele Luppi 合作 ， 并 散 请 Jack White 和 i Jones 友情 参与 
的 专辑 ROME 中 的 歌曲 “Black” 的 音乐 影片 ， 见 图 3-1。 
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图 3-1: RO.ME“3 Dreams of Black”， 由 ROME 专辑 中 的 歌曲 “Black” 衍 生 的 交互 式 音频 体验 


RO.ME 是 一 个 完整 的 虚拟 世界 ， 用 户 可 以 自由 地 控制 相机 视角 以 及 往 场 景 里 添加 物体 ， 同 
时 也 可 以 看 到 其 他 用 户 添加 的 物体 。 这 个 项 目 使 用 Three.js 开发 ， 它 创造 了 在 当时 来 说 突 
破 性 的 WebGL 效果 ， 包 括 用 于 使 近 处 物体 锐 化 、 远 处 物体 模糊 的 景深 着 色 器 ， 用 于 创造 
赛 束 政 动画 风格 视觉 效果 的 赛 囊 埃 (toon) 着 色 器 ， 植 绒 行 为 ， 以 及 点 云 系 统 。 如 果 和 希望 
了 解 更 多 RO.ME 背后 的 技术 ， 请 访问 团队 的 项 目 主页 (http://www.ro.me/tech/)。 


从 梦幻 电影 到 仿真 写实 ， 尽 管 效 果 完 全 不 同 ， 但 Threejjs 在 这 些 WebGL 项 目的 构建 中 起 
到 了 同等 重要 的 作用 。 借 助 Threejs， 人 们 可 以 创造 出 产品 级 的 可 视 化 效果 。 图 3-2 中 的 获 
奖 汽车 配置 案例 由 德国 团队 Plus 360 Degrees 创建 ， 它 允许 用 户 旋转 场景 ， 从 一 系列 精良 
的 汽车 模型 中 选择 自己 喜欢 的 模型 ， 并 自由 改变 其 涂 装 颜 色 和 轮胎 ， 从 而 创造 出 个 性 化 的 
汽车 。 类 似 的 汽车 配置 应 用 多 年 前 已 经 存在 ， 甚 至 还 有 使 用 flash 开发 、 运 行 在 浏览 嚣 中 的 
版 本 ， 尽 管 如 此 ， 这 个 演示 的 产品 价值 还 是 远 远 高 于 过 去 我 们 在 互联 网 上 看 到 的 那些 。 精 
致 的 汽车 细节 模型 ， 使 用 环境 贴图 来 模拟 反射 ， 加 上 光照 和 阴影 ， 组 合成 了 高 度 仿 真 的 视 
觉 效 果 一 一 这 的 确 是 个 非常 令 人 惊叹 的 交互 式 应 用 。 

Three.js 不 仅 擅 长 浑 当 实物， 在 展示 抽象 概念 方面 也 丝毫 不 弱 。 图 3-3 展示 了 这 方面 的 一 个 
惊人 案例 ， 一 个 作为 Google 实验 项 目 创建 的 全 球 小 型 武器 交易 数据 可 视 化 项 目 。 这 个 名 
为 Small Arms Imports/Exports 的 项 目 展 示 了 超过 100 万 个 分 别 代表 小 型 武器 进口 和 出 口 情 
况 的 数据 点 ， 并 使 用 颜色 、 线 条 和 发 光 效果 在 一 个 地 球 模型 上 连接 和 标注 它们 ， 用 以 表明 
1992 到 2010 年 间 小 型 武器 、 轻 武器 以 及 弹药 在 250 个 国家 和 地 区 之 间 的 交易 情况 。 这 些 
线条 构成 的 网 络 清楚 地 展示 了 信息 ， 并 且 视 觉 效果 令 人 震撼 。 
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3-3; 小 型 武器 进出 口 情况 , 由 Google ldeas 创建 的 实验 性 项 目 (http:/www.chromeexperiments. 
com/detail/arms-globe/) 


Three.js 并 不 是 一 个 传统 意义 上 的 游戏 引擎 〈 稍 后 详 述 ) ; 尽管 如 此 ， 它 还 是 可 以 作为 游戏 
引擎 的 底层 支持 。 我 们 可 以 在 它 之 上 构建 游戏 引擎 ， 并 在 此 基础 上 开发 出 不 错 的 游戏 。 为 
了 向 Wipeout 和 F-Zero 系列 游戏 致敬 ，Thibaut Despoulain 开发 了 HexGL 一 个 未 来 太 
空 背 景 的 竞 速 游戏 。HexGL 具有 很 高 的 产品 价值 ， 它 包括 发 光 效果 、 粒 子 系统 、 对 建筑 物 
和 船只 的 真实 感 泻 染 、 利 用 后 浑 染 技术 构建 的 运动 模糊 线 ， 以 及 完美 的 整体 显示 效果 。 桥 
3-4 展示 了 HexGL 的 实际 效果 。 
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3-4: HexGL， 一 个 未 来 感 、 快 节奏 的 竞 速 游戏 ,由 Thibaut Despoulain 使 用 HTML5 、JavaScript 
和 WebGL 创建 


3.2 Three.js 概 览 


Three.js 的 作者 是 巴塞 罗 那 的 Ricardo Cabello Miguel， 或 许 你 更 熟悉 他 的 另 一 个 称呼 
Mr.doob (我 没 敢 问 这 是 为 什么 )。Threejs 由 Mr.doob 早期 ( 近 十 年 前 ) 在 3D 作品 开发 
展示 会 (今天 人 们 称 之 为 黑客 马拉松 ) 上 的 作品 发 展 而 来 。 在 现 有 工具 都 不 能 满足 需求 的 
情况 下 ，Mr.doob 开始 开发 自己 的 工具 ， 这 套 工具 一 开始 是 用 运行 在 Adobe Flash 平台 上 
的 ActionScript 编写 的 。 几 年 后 Google Chrome、 高 效 的 JavaScript 以 及 HIMLS 一 一 登场 ， 
Mr.doob 便 将 他 的 研究 转移 到 了 浏览 器 这 个 新 的 平台 上 。 之 后 在 2010 年 ，Three.js 诞生 了 。 
Three.js 的 第 一 个 版 本 使 用 SVG 和 2D Canvas 演 染 。 在 此 儿 个 月 后 WebGL 发 布 了 ，Three. 
js 便 开始 移植 到 WebGL 上 进行 后 续 开 发 。 这 真是 个 壮举 ， 但 Mr.doob 对 此 表示 “并 不 难 
实现 ”， 也 许 是 因为 他 已 经 基于 WebGL 编写 了 其 他 两 个 泻 染 器 吧 。 从 那 时 开始 ，Three.js 
逐渐 强大 和 完善 ， 并 最 终 成 为 创建 WebGL 3D 应 用 的 最 流行 选择 。 


我 选择 基于 Three.js 来 编写 本 书 中 的 示例 ， 并 不 仅仅 是 由 于 它 非常 流行 的 缘故 一 一 尽管 这 
也 是 一 部 分 原因 。 首 先 ， 我 在 项 目 开发 中 使 用 了 它 ， 并 且 非 常 喜欢 。 其 次 ， 从 功能 的 角度 
来 说 ， 我 认为 它 是 目前 最 完善 的 WebGL 库 。 再 次 ， 它 有 许多 核心 的 代码 贡献 者 ， 这 保证 
了 它 始 终 能 够 和 实际 的 项 目 接轨 。 最 后 ， 它 非常 容易 上 手 一 一 事实 上 ， 易 用 性 是 它 最 大 的 
优点 。 不 过 有 一 点 请 记 住 ，Three.js 只 是 众多 WebGL 库 中 的 一 个 ， 你 还 有 其 他 的 选择 ， 如 
果 你 的 项 目 需要 ， 或 者 你 愿意 的 话 ， 动 手 编写 一 个 自己 的 库 也 未 党 不 可 。 在 本 书 中 你 将 会 
逐步 详细 地 了 解 Three.js， 现 在 我 们 先 给 出 一 个 大 纲 。 


。 Three.js 隐藏 了 WebGL 泻 染 中 的 底层 细节 。Three.js 简化 了 WebGL API 的 细节 ， 将 
3D 场景 表示 为 网 格 、 材 质 、 灯 光 ( 即 图 形 开发 者 常用 的 各 种 对 象 类 型 )。 
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。 Three.js 非常 强大 。Three.js 不 仅仅 是 WebGL 的 一 个 封装 ， 它 内 置 了 许多 可 用 于 游戏 开 
发 、 动 画 、 演 示 、 数 据 可 视 化 、 建 模 工具 应 用 的 非常 有 用 的 模型 对 象 ， 还 提供 了 用 于 特 
殊 效 果 的 后 泻 染 机 制 。 除 了 它 本 身 的 能 力 ，Three.js 还 拥有 丰富 的 示例 ， 你 可 以 在 你 的 
项 目 中 使 用 这 些 示 例 的 代码 。 

。 Three.js 非常 易 用 。Three.js 的 API 基于 友好 和 易学 的 理念 设计 。 随 库 提供 的 许多 示例 
能 够 帮助 你 更 好 地 入 门 。 

。 Three.js 运行 速度 很 快 。Three.js 采用 了 3D 图 形 的 最 佳 实践 ， 既 保证 了 高 性 能 ， 又 不 因 
此 牺 竹 可 用 性 。 

。 Three.js 非常 稳定 。 它 包含 完备 的 错误 检查 、 异 常 和 控制 台 警 告 ， 让 开发 者 可 以 准确 地 
跟踪 程序 问题 。 

。 Three.js 支持 交互 。WebGL 不 具备 原生 的 选中 支持 ， 这 意味 着 你 无 法 获取 到 鼠标 经 过 
了 当前 场景 中 的 哪个 物体 。Three.js 提供 了 对 选中 的 支持 ， 使 得 为 应 用 添加 交互 变 得 更 
加 简单 。 

。 Three.js 支持 数学 计算 。Three.js 包含 强大 易 用 的 3D 数学 运算 对 象 , 如 矩阵、 映射 和 向 量 。 

。 Three.js 内 置 第 三 方 文件 格式 支持 。 你 可 以 利用 Three.js 提供 的 接口 载 入 以 文本 格式 存 
储 的 、 用 流行 的 建 模 工具 导出 的 3D 模型 。Three.js 也 定义 了 自己 专属 的 JSON 和 二 进 
制 3D 模型 文件 格式 。 

。 Three.js 是 面向 对 象 的 。 开 发 者 基于 设计 优良 的 JavaScript 对 象 编写 代码 ， 而 不 是 仅仅 
去 调用 一 些 函 数 。 

。 Three.js 是 可 扩展 的 。 无 论 你 希望 为 Threejs 添加 一 些 特性 ， 还 是 定义 自己 的 个 性 化 
Three.js， 都 是 非常 简单 的 事 。 如 果 现 有 的 数据 格式 支持 无 法 满足 你 的 需求 ， 那 么 你 可 
以 为 特定 的 数据 格式 编写 相应 的 插件 。 

。 Three.js 包含 2D Canvas、SVG、CSS 的 演 染 引擎 。 尽 管 WebGL 已 经 非常 流行 ， 但 
它 并 未 被 所 有 的 浏览 器 支持 ， 这 表示 对 某 些 应 用 来 说 ，WebGL 并 不 是 最 好 的 选择 。 幸 
好 Three,js 还 可 以 使 用 2D Canvas 和 SVG 元 素来 演 染 大 部 分 的 内 容 。 当 运行 环境 不 支 
持 3D Canvas 的 时 候 ， 这 为 你 的 代码 提供 了 一 个 优雅 的 降级 方案 。Three.js 仍然 可 以 用 
来 泻 染 和 变换 CSS 元 素 ， 我 们 将 在 第 6 章 对 此 进行 详细 说 明 。 


需要 提醒 大 家 的 是 ，Three.js 也 有 一 些 不 擅长 的 事情 。 比 方 说 ，Three.js 并 不 是 一 个 游戏 引 
擎 。 它 缺乏 一 些 游戏 引擎 所 需 的 常用 特性 ， 如 公告 牌 、 头 像 、 有 限 状 态 机 以 及 物理 引擎 。 
Three.js 也 没有 编写 多 人 联机 游戏 所 需 的 内 置 网 络 支持 。 你 需要 基于 Three.js 自行 构建 它 ， 
或 是 整合 其 他 专用 的 代码 库 。 同 时 Three.js 也 不 是 一 个 应 用 框架 ， 它 不 具备 一 个 框架 应 有 
的 安装 、 务 载 、 事 件 处 理 和 运行 循环 机 制 。 在 后 续 的 章节 中 我 们 将 逐步 讲述 如 何 使 用 开发 
框架 来 节省 开发 时 间 ， 并 避免 在 每 个 项 目 中 都 重复 实现 一 套 相 同 的 机 制 。 最 后 ，Three.js 
也 不 是 一 个 开发 环境 ， 在 Three.js 中 并 未 包含 用 于 创建 完整 3D 应 用 的 集成 开发 工具 。 

也 就 是 说 ， 除 了 以 上 这 些 Three.js 不 擅长 的 事 以 外 ， 我 们 可 以 尽情 来 欣赏 它 的 优点 : 一 个 
为 浏览 器 设计 的 、 高 性 能 、 功 能 齐全 、 易 用 的 3D 谊 染 引 擎 。 它 非常 强大 。 下 面 让 我 们 来 
初步 认识 这 个 强大 的 引擎 。 
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3. 


2.1 初始 化 Three.js 


如 果 你 希望 使 用 Three.js 来 开发 你 的 项 目 ， 首 先 需 要 从 GitHub 上 获取 它 的 最 新 代码 包 ， 项 
目地 址 是 https://github.com/mrdoob/three.js/。 当 你 将 整个 代码 仓库 复制 下 来 之 后 ， 可 以 在 
文件 夹 中 找到 JavaSript 程序 包 的 未 压缩 版 本 build/three.js。( 文 件 夹 中 还 有 程序 包 的 压缩 版 


本 








build/three.min.js， 你 可 以 在 项 目 完 结 发 布 的 时 候 使 用 它 。 尽 管 如 此 ， 我 还 是 建议 你 在 研 


究 本 书 示 例 的 时 候 使 用 未 压缩 的 版 本 ， 以 便于 调试 .) 同时 也 不 要 去 改变 src 文件 夹 下 的 目 
录 结 构 。 尽 管 Threejs 的 GitHub 仓库 中 同时 包含 了 文档 页 面 ， 但 这 仅仅 是 一 些 非常 基础 的 
说 明 ， 所 以 你 需要 保持 原 有 的 目录 结构 ， 以 保证 正确 的 引用 。 


3. 




















本 书 中 使 用 的 Three.js 版 本 是 revision 58 (r58)。Mr.doob 及 其 团队 一 直 频 
繁 地 更 新 版 本 ， 因 此 如 果 你 下 载 的 是 最 新 版 本 的 Three.js， 本 书 中 的 某 些 示 
例 可 能 无 法 正确 运行 。 本 书 中 的 全 部 示例 代码 都 独立 引用 了 一 个 158 版 本 的 
Three.js 副本 ， 该 文件 可 以 在 目录 libs/three.js.r58/ 中 找到 。 





























2.2 ”Three.js 工 程 结构 





为 了 熟悉 Three.js， 我 们 需要 花 一 些 时间 来 了 解 它 的 的 目录 结构 、 文 档 和 示例 。 这 里 面包 
含 的 东西 很 多 。 你 一 定 急 着 想 要 开始 编写 代码 了 ， 不 过 相信 我 ， 花 一 点 时 间 来 把 这 些 东 西 
看 一 遍 ， 尤 其 是 example 目录 下 的 内 容 。 你 不 会 后 悔 的 。 

















下 中 


我 们 来 大 致 说 明 一 下 整个 工程 的 文件 目录 结构 。 

build/ 

Three.js 的 完整 项 目 代 码 输 出 目录 ， 包 括 未 压缩 版 本 和 压缩 版 本 。Three.js 使 用 Google 
Closure 进行 编译 发 布 ， 编 译 好 的 输出 文件 包含 完整 的 Three.js 库 代 码 ， 它 由 不 同 代 码 
目录 下 的 源 代码 编译 而 成 。 如 果 你 不 熟悉 Closure 并 且 希 望 了 解 更 多 关于 它 的 信息 ， 请 
访问 http://code.google.com/closure/compiler/。 注 意 ， 你 并 不 需要 再 次 执行 Three.js 的 编 
译 发 布 过 程 。 如 果 你 并 不 想 处 理 编译 发 布 相关 的 事情 ， 那 么 只 需 直 接 使 用 build 目录 中 
编译 好 的 three.js 或 three.min.js。 

docs/ 

这 个 目录 包含 以 HTML 格式 编写 的 完整 API 文档 。 虽 然 这 份 文档 并 不 详细 ,但 至 少 它 
为 熟悉 整个 库 提供 了 一 份 很 好 的 设计 概述 。 

editor/ 

Three.js 团队 开发 了 一 个 用 于 创建 3D 场景 的 编辑 系统 。 在 本 书写 作 时 ， 这 个 工具 尚 处 
于 开发 期 ， 还 不 能 真正 用 于 产品 。 但 你 应 该 信任 Mr.doob 的 实力 : 因为 只 要 给 他 一 个 浏 
览 器 和 一 个 文本 编辑 器 ， 就 没有 他 不 敢 尝试 的 东西 ! 

examples/ 

这 个 目录 包含 几 百 个 示例 。 这 些 示 例 履 盖 了 Three.js 的 各 种 特性 和 效果 ， 包 括 Canvas、 
CSS 和 WebGL 泻 染 器 的 使 用 范例 。 其 中 一 些 是 简单 的 “技术 演示 ”， 用 于 展现 一 些 典 
型 的 特性 ， 男 一 些 则 是 综合 运用 了 各 类 特性 的 精心 大 作 。 请 花费 一 些 时 间 来 浏览 每 一 个 
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| 第 3 章 


示例 以 及 阅读 它们 的 代码 ， 这 是 你 熟悉 并 领略 Three.js 强大 功能 的 最 佳 途径 。 

。 src/ 
整个 库 的 代码 文件 目录 。 这 是 一 个 复杂 的 文件 树 结构 ， 大 致 上 可 以 分 为 两 个 部 分 : 核 
心 和 扩展 。 核 心 部 分 包括 主要 的 特性 集合 ， 这 是 Three.js 可 运行 的 基础 。 倘 若 这 部 分 缺 
失 ， 你 将 无 法 使 用 Three.js 来 泻 染 场景 。 扩 展 部 分 包含 大 量 有 用 的 特性 ， 包 括 : 内 置 的 
儿 何 形状 ， 如 立方 体 、 球 体 和 圆柱 ， 动画 相 关 的 通用 函数 ， 以 及 图 片 加 载 类 。 你 完全 可 
以 基于 Three.js 核心 自行 构建 这 些 东 西 ， 但 你 显然 并 不 愿意 这 么 做 。 因 此 ， 虽 然 属于 扩 
展 部 分 ， 但 它们 默认 包含 在 编译 输出 的 完整 库 文件 中 。 

。 utils/ 
这 个 目录 包含 各 种 工具 ， 包 括 用 于 编译 压缩 和 非 压 缩 版 本 库 文件 的 Google Closure 脚 
本 ， 用 于 将 各 种 3D 文件 格式 转换 为 Three.js JSON 和 二 进 制 文件 格式 (后 续 将 会 更 加 
详细 说 明 ) 的 文件 转换 器 ， 还 提供 了 用 于 从 建 模 软件 导出 Three.js 格式 文件 的 插件 ， 如 
Blender 和 Maya。 


3.3 一 个 简单 的 Three.js 程 序 


现在 你 对 Threejs 应 当 已 经 有 了 一 个 大 至 上 的 了 解 ， 是 时 候 开 始 动手 编写 程序 了。 我们 的 
第 一 个 示例 意 在 向 大 家 清楚 地 展示 这 个 库 的 价值 一 一 相对 于 在 少 得 不 能 再 少 的 WebGL API 
上 开发 而 言 。 

回忆 一 下 上 一 章 的 纹理 映射 立方 体 ， 在 这 里 ， 我 们 将 再 一 次 实现 它 ， 但 这 次 我 们 使 
用 Three.js。 所 需 的 Threejs 代码 如 例 3-1 所 示 ， 完 整 的 可 运行 代码 可 以 在 Chapter 3/ 
threejscube.html 文件 中 找到 。 

例 3-1: 用 Three.js 创建 一 个 纹理 映射 立方 体 


<script type="text/javascript"> 































































































var renderer = null, 
scene = null, 

camera = null, 

cube = null; 


var duration = 5000; // ms 
var currentTime = Date.now(); 
function animate() { 


var now = Date.now(); 

var deltat = now - currentTime; 
currentTime = now; 

var fract = deltat / duration; 
var angle = Math.PI * 2 * fract; 
cube.rotation.y += angle; 


} 


function run() { 
requestAnimationFrame(function() { run(); }); 
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} 


// 渲染 场景 


renderer.render( scene, camera ); 


// 为 下 一 帧 动画 旋转 立方 体 


animate( ); 


$(document).ready( 


); 


</script> 


function() { 


var canvas = document.getElementById("webglcanvas"); 








Ey 


// 创建 Three.js 泻 染 器 并 将 其 添加 到 canvasj 
renderer = new THREE.WebGLRenderer( 

{ canvas: canvas, antialias: true } ); 
// 设置 视 口 尺寸 


renderer.setSize(canvas.width, canvas.height); 








// 创建 一 个 新 的 Three. js 场景 


scene = new THREE.Scene(); 








// 添加 一 个 相机 以 便 观察 整个 场景 

Camera = new THREE.PerspectiveCamera( 45, 
canvas.width / canvas.height, 1, 4000 ); 

scene.add(camera); 


// 创建 一 个 纹理 映射 的 立方 体 并 将 其 添加 到 场景 
// 首先 ,创建 纹理 映射 

var mapUrL = "../images/webgl-logo-256.jpg"; 
var map = THREE.ImageUtiLLs.LoadTexture(mapUrtL ) ; 








也 

















// 其 次 ,创建 一 个 基础 材质 ,传人 纹理 映射 


var material = new THREE.MeshBasicMaterial({ map: map }); 











// 接着 ,创建 立方 体 几 何 形状 
var geometry = new THREE.CubeGeometry(2, 2, 2); 








UD 


// 其 次 ,将 儿 何 形状 和 材质 整合 到 一 个 网 格 


cube = new THREE.Mesh(geometry, material); 








{11 sh 段 距 离 的 位 置 ,并 朝向 观察 者 倾斜 
Cube.position.z = 

cube.rotation.x = ee J 52 

cube.rotation.y = Math.PI / 5; 


// 最 后 ,将 网 格 添加 到 场景 中 
scene.add( cube ); 
// 启动 运行 循环 


run(); 





这 里 的 动画 和 运行 循环 代码 与 第 2 章 中 的 代码 十 分 相似 ， 只 有 一 些小 的 变化 ， 稍 后 再 解 
释 。 在 这 个 版 本 中 ， 比 较 显 著 的 变化 是 立方 体 场 景 的 创建 : 在 之 前 使 用 了 WebGL 标准 
API 的 代码 中 ， 为 实现 这 个 需求 ， 我 们 耗费 了 接近 300 行 代码 ， 然 而 在 使 用 Three,js 的 示 
例 中 ， 我 们 仅仅 需要 40 行 代码 。 这 里 的 jQuery ready() 回调 作用 于 整个 页 面 。 在 这 里 更 体 
现 了 这 个 特性 。 总 的 来 说 ， 这 是 一 个 普通 的 简单 示例 ， 但 至 少 从 这 个 示例 中 我 们 可 以 开始 
想象 如 何 构 建 全 面 的 应 用 ， 正 如 我 们 在 本 章 开 头 所 见 过 的 那些 一 样 。 让 我 们 来 详细 分 析 这 
个 示例 。 


3.3.1 创建 演 染 器 

首先 ， 我 们 需要 创建 一 个 渔 染 器 (render)。Three.jjs 使 用 插件 式 的 浑 当 系统。 我 们 可 以 
使 用 不 同 的 API 来 浑 染 相同 的 场景 ， 例 如 对 同一 个 场景 ， 我 们 既 可 以 使 用 WebGL API 
来 泻 染 ， 也 可 以 使 用 2D Canvas API 来 稼 染 。 在 这 个 示例 中 ， 我 们 创建 了 一 个 THREE. 
WebGLRenderer 对 象 ， 并 传人 两 个 参数 来 对 其 进行 初始 化 : canvas， 正 如 字面 上 的 意思 ， 代 
表 HTML 文件 中 的 <canvas> 元 素 ; antialias 标记 ， 用 于 告知 Three.js 开启 基于 硬件 的 多 
重 采 样 抗 馈 此 (multi-sample antialiasing，MSAA) 策略 。 抗 锯齿 选项 用 于 使 演 染 的 物体 边 
缘 平 请 ， 避 免 呈 现 锯齿 。Three.js 使 用 这 些 参 数 来 构建 一 个 WebGL 绘图 上 下 文 ， 并 将 这 个 
绘图 上 下 文 添加 到 泻 染 器 对 象 中 。 

创建 好 泻 染 器 之 后 ， 我 们 将 泻 染 器 的 尺寸 设置 为 canvas 对 象 的 的 宽 和 高 ， 这 与 第 2 章 中 调 
用 gl.viewport() 来 设置 视 口 尺寸 的 操作 是 等 效 的 。 演 染 器 的 全 部 设置 只 需 两 行 代码 : 


// 创建 Three.js 泻 染 器 并 将 其 添加 到 canvas 中 
renderer = new THREE.WebGLRenderer( 
{ canvas: canvas, antialias: true } ); 















































// 设置 视 口 尺寸 


renderer .setSize(canvas.width, canvas.height); 


3.3.2 创建 场景 


其 次 ， 我 们 通过 创建 一 个 THREE. Scene 对 象 来 创建 一 个 场景 (scene)。 这 个 场景 是 Three.js 
图 形 层 级 结构 的 最 顶层 。 它 包含 其 他 的 全 部 图 形 对 象 。( 在 Three.js 中 ， 对 象 以 父 - 子 层 级 
结构 的 形式 存在 。 我 们 稍 后 会 对 此 进行 更 详细 的 说 明 。) 


现在 我 们 有 了 一 个 场景 ， 我 们 将 为 这 个 场景 添加 两 个 对 象 : 一 个 相机 〈camera) 和 一 个 网 
格 (mesh)。 相 机 定义 了 我 们 观察 场 景 的 位 置 : 在 这 个 示例 中 ， 我 们 让 相机 停留 在 它 的 默 
认 位 置 ， 即 场景 坐标 系统 的 原点 。 在 这 里 我 们 定义 了 一 个 THREE.PerspectiveCamera 类 型 的 
相机 ， 并 用 四 个 参数 来 初始 化 它 。 这 四 个 参数 分 别 是 : 45 度 的 视野 角 、 宽 高 比 、 最 近 平面 
和 最 远 平面 的 位 置 坐 标 值 。 在 Three.js 的 内 部 ， 这 些 参数 会 被 用 来 构建 成 一 个 透视 投影 矩 
阵 ， 用 于 将 3D 场景 泻 染 到 2D 绘图 平面 上 。( 如 果 你 不 记得 相机 、 视 口 和 投影 是 什么 了 ， 
请 翻 回 到 第 1 章 的 图 形 基础 内 容 。) 


用 于 创建 场景 和 添加 相机 的 代码 同样 十 分 简洁 : 
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// 创建 一 个 新 的 Three. js 场景 


scene = new THREE.Scene(); 


// 添加 一 个 相机 以 便 观察 整个 场景 

camera = new THREE.PerspectiveCamera( 45, 
canvas.width / canvas.height, 1, 4000 ); 

scene.add(camera); 


现在 是 时 候 把 网 格 添加 到 场景 中 了 。 一 个 网 格 包括 一 个 几何 形状 (geometry) 和 一 个 材质 
(material) 。 我 们 使 用 Three.js 内 置 的 CubeGeometry 对 象 来 创建 一 个 2x2x2 的 立方 体 。 材 
质 用 于 定义 如 何 泻 染 物体 的 表面 。 在 这 个 示例 中 我 们 定义 了 一 个 MeshBasicMaterial 类 型 
的 材质 ， 这 是 一 个 最 简单 的 、 不 带 光 照 效果 处 理 的 材质 。 我 们 将 一 张 WebGL logo 的 图 片 
作为 纹理 映射 使 用 在 立方 体 上 。 纹 理 映 射 ， 又 称 纹理 ， 是 用 来 表示 3D 网 格 模型 表面 属性 
的 位 图 。 纹 理 映 射 最 简单 的 使 用 方法 是 定义 一 个 表面 颜色 ， 而 它们 也 可 以 通过 组 合 来 产生 
复杂 的 效果 ， 例 如 凹凸 或 高 光 。 


WebGL 提供 了 一 系列 纹理 相关 的 API， 并 提供 了 重要 的 安全 特性 ， 例 如 在 纹理 使 用 中 对 跨 
域 访问 的 限制 。 令 人 兴奋 的 是 ，Three.js 提供 了 一 个 非常 简单 的 API， 这 个 API 可 以 用 来 
加 载 纹理 ， 并 便利 地 将 其 和 材质 进行 结合 。 我 们 调用 THREE.ImageUtils.loadTexture() 来 
从 图 片 文 件 加 载 纹理 ， 并 通过 材质 构造 时 传人 的 map 参数 将 得 到 的 纹理 和 材质 结合 起 来 : 

// 创建 一 个 纹理 映射 的 立方 体 并 将 其 添加 到 场景 中 

// 首先 ,创建 纹理 映射 

var mapUrL = "../images/webgl-logo-256.jpg"; 

var map = THREE.ImageUtiLiLs.LoadTexture(mapUrL) ; 

















































































































// 其 次 ,创建 一 个 基础 材质 ,传人 纹理 映射 参数 

var material = new THREE.MeshBasicMaterial({ map: map }); 
在 这 里 ，Threejs 的 底层 代码 做 了 一 系列 的 事情 。 它 将 JPEG 图 片 的 像素 点 映射 到 立方 体 每 
个 表面 的 正确 位 置 上 : 图 片 既 没 有 被 拉 伸 覆盖 整个 立方 体 ， 每 个 面 上 的 图 片 也 没有 颠倒 或 翻 
转 。 这 看 起 来 并 没有 什么 大 不 了 的 。 然 而 我 们 回顾 前 一 章 ， 如 果 用 WebGL 的 原生 方法 ， 我 
们 需要 编写 大 量 的 代码 来 保证 正确 的 映射 ,但 使 用 了 Threejs， 我 们 就 只 需 短 短 的 几 行 代码 。 


最 后 我 们 创建 立方 体 的 网 格 。 到 这 里 我 们 已 经 构建 了 几何 形状 、 材 质 和 纹理 。 我 们 将 它们 
整合 到 一 个 变量 名 为 cube 的 THREE.Mesh 对 象 上 。 在 将 其 添加 到 场景 前 ， 我 们 将 立方 体 设 
置 在 相机 后 方 八 个 单位 长 度 的 位 置 上 ， 正 如 我 们 在 第 2 章 的 示例 中 所 做 的 那样 ， 不 同 的 是 
现在 我 们 不 必 在 面 对 那 些 繁琐 的 和 矩阵 计算 ， 只 需 简 单 地 设置 立方 体 的 position.z 属性 。 同 
时 我 们 将 立方 体 向 观看 者 方向 倾斜 了 一 个 角度 ， 以 便 可 以 看 清 立 方 体 的 项 面 ， 这 只 需 设 置 
立方 体 的 rotation.x 属性 就 可 以 做 到 。 然 后 我 们 将 这 个 立方 体 添加 到 场景 中 。 好 了 | 泻 染 
场景 所 需 的 一 切 都 准备 就 绪 。 
// 将 网 格 移动 到 与 相机 有 一 段 距 离 的 位 置 , 并 朝向 观察 者 倾斜 
Cube.position.z = -8; 


cube.rotation.x = Math.PI / 5; 
cube.rotation.y = Math.PI / 5; 


























































































































// 最 后 ,将 网 格 添加 到 场景 中 


scene.add( cube ); 








3.3.3 ”运行 循环 的 实现 


和 上 一 章 的 示例 一 样 ， 我 们 需要 使 用 requestAnimationFrame() 国 数 来 实现 一 个 运行 循环 。 
不 过 实现 的 细节 略 有 不 同 。 在 之 前 的 版 本 里 ， 我 们 的 draw() 国 数 需要 设置 缓冲 、 设 置 泻 染 
状态 、 清 空 视 口 、 设 置 着 色 器 和 纹理 ， 等 等 。 使 用 Three.js， 我 们 只 需 短 短 的 一 行 代码 : 


renderer .render( scene, camera ); 


然后 代码 库 会 帮 你 处 理 其 余 的 事情 。 在 我 看 来 ， 就 这 件 事 本 身 ， 已 经 足以 成 为 选用 Three. 
js 的 理由 o 


最 后 我 们 要 展示 的 是 将 立方 体 旋转 一 个 角度 ， 以 便 能 够 更 好 地 看 清 它 的 3D 结构 。 有 了 
Three.js， 这 同样 非常 简单 : 只 需 将 rotation.y 属性 设置 为 新 的 旋转 角度 ，Three.js 的 底层 
代码 就 会 处 理 相 关 的 矩阵 运算 ， 而 不 用 我 们 自己 动手 去 处 理 它 。 在 下 一 次 运行 循环 执行 的 
时 候 ，render() 函数 会 使 用 新 的 y 旋转 值 ， 从 而 立方 体会 持续 旋转 。 以 下 是 animate() 和 
render() 图 数 的 具体 实现 ; 

var duration = 5000; // ms 


var currentTime = Date.now(); 
function animate() { 






























































var now = Date.now(); 

var deltat = now - currentTime; 
currentTime = Now; 

var fract = deltat / duration; 
var angle = Math.PI * 2 * fract; 
cube.rotation.y += angle; 


3 


function run() { 
requestAnimationFrame(function() { run(); }); 


// 渲染 场景 
renderer.render( scene, camera ); 


// 为 下 一 帧 动画 旋转 立方 体 
animate(); 


} 
结果 如 图 3-5 所 示 ， 是 不 是 很 熟悉 ? 
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3-5: 使 用 Three.js 创建 的 纹理 映射 立方 体 


3.3.4 为 场景 添加 光照 


例 3-1 绘制 了 一 个 我 们 能 够 创建 的 最 简单 的 Three.js 3D 场景 。 但 你 可 能 已 经 注意 到 ， 在 
这 个 示例 中 ， 绘 制 出 来 的 3D 立方 体 看 起 来 并 不 十 分 “3D”。 当 然 ， 在 立方 体 旋转 的 时 候 ， 
我 们 通过 各 个 面 上 的 纹理 可 以 粗略 地 看 出 立方 体 的 形状 。 但 整个 场景 中 缺失 了 一 个 很 重要 
的 因素 : 明暗 。 实 时 3D 泻 染 中 令 人 惊叹 的 一 点 是 : 你 可 以 使 用 灯光 来 打造 一 个 物体 表面 
的 明 部 和 暗部。 如 图 3-6 所 示 ， 现 在 立方 体 的 各 个 面 有 了 清晰 的 边缘 ， 正 如 你 在 现实 世界 
中 看 到 的 3D 物体 一 样 。 我 们 通过 向 场景 中 添加 灯光 来 实现 这 一 点 。 


我 曾经 试图 在 第 2 章 的 例子 中 添加 灯光 。 但 为 此 我 需要 重 写 顶 点 和 片段 着 色 器 ， 并 编写 大 
量 的 代码 用 于 更 新 顶点 缓冲 数据 ， 这 显然 并 不 值得 ， 当 时 ， 我 在 苦 酌 是 否 应 该 浪费 生命 去 
编写 古怪 的 WebGL 代码 ， 仅 仅 为 了 实现 如 此 简单 的 事情 。 有 了 Three.js， 这 简直 不 费 吹 灰 
之 力 就 可 以 实现 。 我 们 仅仅 需要 新 增 几 行 代码 。 看 看 例 3-2 你 就 知道 了 。 此 版 本 的 完整 源 
代码 可 以 在 Chapter 3/threejscubelit.html 中 找到 。 









































































































































图 3-6: Three.js 立方 体 ， 带 灯光 ， 使 用 Phong 着 色 方法 


例 3-2: 用 Three.js 为 立方 体 添 加 光照 
// 添加 用 于 突出 显示 物体 的 定向 光 
var light = new THREE.DirectionalLight( Qxffffff, 1.5); 


// 将 灯光 放置 在 场景 外 ,指向 原点 
light.position.set(0, 0, 1); 
scene.add( light ); 





// 创建 一 个 带 明暗 的 纹理 映射 立方 体 ,并 将 其 添加 到 场景 中 
// 首先 ,创建 纹理 映射 

var mapUrl = "../images/webgl-logo-256.jpg"; 

var map = THREE.ImageUtils.loadTexture(mapUrl); 


// 其 次 ,创建 一 个 Phong 材 质 来 展示 明暗 效果 , 传 入 纹理 映射 参数 

var material = new THREE.MeshPhongMaterial({ map: map }); 

加 粗 显 示 的 部 分 表明 了 整个 过 程 。 首 先 ， 我 们 往 场 景 中 添加 一 个 灯光 。 灯 光 也 是 场景 中 的 
一 类 物体 : 当 你 创建 它们 并 将 它们 添加 到 场景 中 时 ， 它 们 的 值 将 被 用 来 泻 染 其 他 物体 。 在 
这 个 示例 中 ， 我 们 使 用 了 一 个 定向 光 (directional light) 。 这 是 一 束 来 自 特定 方向 的 平行 光 
线 。Three.js 用 于 构建 定向 光 的 语法 (在 我 看 来 ) 有 点 违反 直觉 : 你 需要 定义 灯光 的 位 置 ， 
以 及 照射 的 位 置 (默认 位 置 是 原点 ， 故 而 此 处 省 略 了 这 一 步 )。 然 后 Three.js 通过 用 灯光 位 
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置 减 去 照射 位 置 来 计算 出 定向 光 的 方向 。 在 我 们 的 示例 中 ， 灯 光 从 屏幕 的 (0，6，1) 位 置 
指向 (0，9，9)， 即 直射 位 于 原点 位 置 的 立方 体 。 


为 了 看 到 灯光 的 效果 ， 我 们 需要 做 一 些 事情 。 我 们 用 一 个 Phong 材质 代替 了 上 一 个 示例 中 
使 用 的 基础 材质 。 在 Threejs 中 ， 一 个 物体 如 何 被 照 亮 ， 不 但 依赖 于 添加 到 场景 中 的 灯光 ， 
同时 依赖 于 它 自身 的 材质 类 型 。Phong 材质 类 型 实现 了 一 个 简单 但 看 起 来 非常 逼真 的 着 色 
模型 ， 简 称 Phong 着 色 法 ， 它 的 性 能 非常 优秀 。 我 们 现在 可 以 看 清 立方 体 的 边缘 了 : 朝向 
灯光 的 面 看 起 来 更 明亮 ， 而 背 向 灯光 的 面 则 看 起 来 比较 暗 ， 明 暗 交 界 的 边缘 清晰 地 展现 出 
两 个 面 的 相交 处 。 关 于 光照 还 有 更 多 的 东西 ， 但 那些 是 更 为 基础 的 内 容 ， 我 们 会 在 下 一 章 
更 详细 地 探讨 光照 的 概念 。 现 在 至 少 我 们 创建 了 一 个 所 谓 的 “真实 效果 3D 模型 "*， 仅 使 用 
一 页 的 JavaScript 代码 。 


Phong 着 色 法 由 美国 犹他 大 学 的 裴 祥 风 (Bui opr Phong) 发 明 。Phong 算 
法 在 当时 是 非常 先进 的 ， 而 如 今 也 是 许多 泻 染 应 用 的 一 个 标准 演 染 方式 ， 
尤其 是 在 实时 泻 染 中 ， 以 支持 高 效 的 真实 明暗 计算 。 如 果 想 了 解 更 多 关于 
Phong 着 色 法 的 信息 ， 请 访问 其 维基 百科 词 条 (http://en.wikipedia.org/wiki/ 
Phong_shading ) 。 



























































3.4 小 结 


本 章 我 们 介绍 了 Three.js， 最 流行 的 基于 WebGL、 用 于 构建 3D Web 应 用 的 开源 工具 包 。 
我 们 欣赏 了 一 些 使 用 它 构 建 的 令 人 惊叹 的 工程 ， 从 实验 性 的 互动 电影 ， 到 电子 商务 的 可 视 
化 。 我 们 从 GitHub 上 获取 了 整个 工程 的 最 新 源 代 码 ， 并 简单 地 浏览 了 它 。 最 后 ， 我 们 通 
过 编写 一 些 简 单 的 程序 来 展现 这 个 库 带 来 的 价值 : 用 原生 WebGL 编写 的 需要 几 百 代码 的 
一 段 程序 ， 使 用 Three.js 只 需 几 十 行 就 可 以 实现 。 此 外 ，Three.js 让 我 们 得 以 基于 完善 的 
3D 图 形 概念 和 熟悉 的 面向 对 象 风 格 来 工作 。 


本 章 大 致 讲述 了 Three.js 是 如 何 加 快 我 们 的 开发 速度 的 ， 在 接 下 来 的 几 章 中 ， 我 们 将 具体 
了 解 Threejjs 的 强大 功能 














第 4 章 





Three.js 中 的 图 形 和 泻 








在 本 章 中 ， 我 们 将 体验 Three.js 为 绘制 图 形 和 泻 染 场景 提供 的 大 量 特 性 。 如 果 你 对 3D 编 





程 还 不 熟悉 ， 很 有 可 能 本 章 中 的 某 些 主题 你 无 法 马上 理解 。 但 是 如 果 你 一 个 个 完成 了 代码 


示例 ， 最 终 就 可 以 很 好 地 使 用 Three.js 的 能 力 来 创造 优秀 的 应 用 。 











Three.js 有 着 丰富 的 图 形 系统 ， 这 一 方面 是 受到 了 很 多 之 前 的 3D 图 形 库 的 启发 ， 另 一 方面 











来 源 于 它 的 作者 们 的 经 验 。Threejs 提供 了 人 们 对 3D 代码 库 期 望 的 特性 ， 以 及 用 多 边 形 


网 


格 构建 的 2D 和 3D 几何 图 形 ， 包含 层级 结构 物体 和 变换 的 场景 图 像 ， 材 质 、 纹 理 和 灯光 ， 
实时 阴影 ， 开 放 给 用 户 定义 的 可 编程 着 色 器 ， 以 及 一 个 可 用 于 高 级 特殊 效果 的 、 支 持 多 通 














道 和 延迟 演 染 技术 的 灵活 演 染 系统 。 


4.1 几何 图 形 和 网 格 


比 起 直接 使 用 WebGL API 来 工作 ， 使 用 Three.js 的 一 大 便利 在 于 它 大 大 节省 了 我 们 用 于 
构建 几何 形状 的 时 间 。 回 想 一 下 第 2 章 用 于 构建 一 个 简单 的 立方 体 及 其 纹理 贴图 的 大 段 代 
码 ， 当 时 我 们 使 用 了 WebGL 缓冲 ， 在 绘制 过 程 中 ， 我 们 还 需要 编写 一 些 代 码 来 将 这 些 数 
据 转 移 到 WebGL 的 内 存 空间 中 ， 以 便 进行 真实 的 绘制 。Three.js 提供 了 一 系列 现成 的 几 
何 形 状 对 象 ， 将 开发 者 从 这 些 繁琐 的 工作 中 解救 出 来 。 这 些 几 何 形 状 包 括 预 置 的 几何 形状 
(如 立方 体 和 圆柱 )、 路 径 绘 制 形状 、2D 挤 出 几何 体 ， 以 及 用 户 可 扩展 的 基 类 ， 以 供 我 们 


























自由 添加 自 定义 的 几何 形状 。 下 面 让 我 们 来 探讨 它们 。 


4.1.1 预 置 的 几何 形状 类 型 





Threejs 提供 了 许多 内 团 的 常见 几何 形状 。 包 括 简 单 的 立体 ， 例 如 立方 体 、 球 体 和 圆柱 ， 
一 些 包含 更 复杂 变量 的 形状 ， 包 括 基础 形状 以 及 基于 路 径 的 形状 、 圆 环 和 纽 结 ; 泻 染 在 
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空间 中 的 2D 形状 ,例如 圆 、 和 矩形 和 圆 环 ， 黄 至 还 包括 从 2D 文字 计算 转化 而 来 的 3D 
ee Threejs 同时 支持 给 会 制 3D 点 和 线 。 多 数 这 类 形状 ， 你 都 可 以 使 用 一 行 构 
造 国 数 很 容易 地 创建 出 来 ， 其 中 某 些 可 能 需要 调整 一 些 略 微 复杂 的 参数 ， 以 及 编写 一 点 点 
代码 。 


如 果 和 希望 切实 体验 Three.js 预 置 的 几何 形状 ， 请 运行 Three.js 项 目 中 的 examples/webgl_ 
geometries.html， 如 图 4-1 所 示 。 示 例 中 的 每 个 网 格 对象 包 含 一 个 代表 一 类 内 置 的 几何 形状 
类 型 的 形状 ， 以 及 一 个 展示 该 形状 纹理 坐标 计算 方式 的 纹理 贴图 。 纹 理 贴 图 来 自 PixelCG 
Tips and Tricks， 这 是 一 个 优秀 的 计算 机 图 形 指 引 教程 站 点 。 整 个 场景 用 一 个 水 平 灯光 照 
亮 ， 以 展示 每 个 物体 的 着 色 方式 。 

































































图 4-1: Three.js 内 置 几何 形状 演示 。 sa, 从 前 到 后 依次 为 : 球体 、 二 十 面体 、 八 面体 、 
四 面体 ; 平面、 立方 体 、 圆 、 环 、 圆 台 ， 车 床 、 圆 环 、 环 面 纽 结 、 三 维 坐标 系 和 方向 矢量 


4.1.2 路径、 形状 和 挤 出 


Threejs 中 的 路 径 (Path) 类 、 形 状 (Shape) 类 和 挤 出 几何 体 (ExtrudeGeometry) 类 提 
供 了 许多 灵活 的 几何 图 形 生成 方式 ， 例 如 通过 曲线 来 创建 挤 出 几何 体 。 图 4-2 展示 了 一 个 
基于 样 条 线 的 挤 出 形状 。 想 要 观察 实际 效果 ， 请 打开 Three.js 项 目 中 的 examples/webgl_ 
geometry_extrude_shapes.html。 或 者 另 一 个 例子 ，eamples/webgl_geometry_extrude_splines. 
html， 这 个 示例 允许 你 选择 各 种 样 条 函数 来 生成 搞 出 形状 ， 并 提供 了 用 于 查看 曲线 形状 的 
运动 相机 。 样 条 与 挤 出 的 结合 是 用 于 构建 有 机 形状 的 重要 技术 ， 我 们 将 在 第 5 章 对 此 进行 
详细 说 明 。 
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图 4-2: Three.js 中 基于 样 条 的 挤 出 ( 另 见 彩 插图 4-2) 


Shape 类 还 可 以 用 于 创建 2D 平面 形状 或 者 基于 这 些 形状 的 3D 挤 出 。 假 设 你 有 一 个 2D 多 
边 形 数据 的 库 (例如 地 理 版 图 边缘 或 矢量 艺术 形状 )， 你 可 以 非常 简单 地 利用 Three.js 提供 
的 Path 类 将 这 些 数据 导入 到 Three.js ee Path 类 同时 提供 了 一 些 简单 的 路 径 绘 制 函 
数 ， 例 如 moveTo() 和 LineTo()， 有 2D 绘图 开发 经 验 的 人 一 定 对 这 些 国 数 非常 熟悉 (基本 
上 ， 这 是 一 套 内 置 于 3D 绘图 库 中 的 2D 绘图 API) 。 为 什么 要 这 样 做 呢 ? 0 
有 一 个 现成 的 2D 形状 ， 那 么 你 可 以 利用 它 来 创建 一 个 存在 于 3D 空间 中 的 平面 网 格 : 
. 与 其 他 3D 物体 同样 的 方式 (平移 、 旋 转 、 缩 放 ) 进行 变换 ; 它 可 以 利用 材质 来 进行 
绘制 ， 并 像 场景 中 的 其 他 物体 一 样 被 照 亮 和 着 色 。 你 还 可 以 对 它 进 行 挤 出 ， 从 而 创建 一 个 
基于 2D 外 轮廓 的 真正 的 3D 形状 。 
0 html 中 的 演示 ， 如 图 4-3 所 示 ， 很 好 地 展示 了 Threejs 的 
这 一 能 力 。 我 们 可 以 看 到 加 利 福 尼 亚 州 的 轮廓 、 一 些 简 单 的 多 边 形 ， 以 及 特殊 形状 ， 如 心 
形 和 笑脸 。 这 些 形状 分 别 以 多 种 方式 绘制 ， 包 括 平面 2D 网 格 、 挤 出 并 添加 了 切 角 的 3D 
网 格 ， 以 及 线条 一 一 所 有 这 些 都 是 由 基于 路 径 的 数据 派生 而 来 。 





















































Threejs 中 的 图 形 和 泻 染 | 51 












Simple procedurally generated 3D shapes example by zz85 
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4-3: Three.js 实现 基于 路 径 的 挤 出 形状 〈 另 见 彩 插图 4-3) 


4.1.3 几何 形状 基础 类 


Three.js 预 置 的 几何 体 类 型 派生 自 THREE.Geometry (src/core/Geometry.js) 基 类 。 你 也 可 以 
利用 这 个 基 类 来 编写 你 自己 的 几何 形状 。 下 面 我 们 来 看 一 看 预 置 几 何 形状 的 源 代码 ， 以 便 
对 这 些 类 如 何 实现 几何 形状 有 个 大 致 的 了 解 。 几 何 形状 类 的 代码 存放 在 Three.js 工程 目录 
下 的 src/extras/geometries/ 文件 夹 中 。 为 了 更 好 地 说 明 ， 我 们 来 浏览 一 下 其 中 一 个 比较 简单 
的 几何 物体 ，THREE.CircleGeometry 的 实现 代码 。 例 4-1 列 出 了 这 个 物体 的 相关 代码 ， 总 
共 耗 费 了 一 页 的 篇 幅 。 

例 4-1: Three.js 圆 形 几何 体 代码 

/** 


* @author hughes 
A 


THREE.CircleGeometry = function ( radius, segments, thetaStart, thetaLength ) { 


THREE.Geometry.call( this ); 
radius = radius || 50; 








thetaStart = thetaStart !== Undefined ? thetaStart : 0; 
thetaLength = thetaLength !== undefined ? thetaLength : Math.PI * 2; 
segments = segments !== undefined ? Math.max( 3, segments ) : 8; 


var i, uvs = []， 
center = new THREE.Vector3(), centerUV = new THREE.Vector2( 0.5, 0.5 ); 


this.vertices.push(center); 
uvs.push( centerUV ); 


for ( i= 0; i <= segments; i ++ ) { 


var vertex = new THREE.Vector3(); 
var segment = thetaStart + i / segments * thetaLength; 


vertex.x = radius * Math.cos( segment ); 
vertex.y = radius * Math.sin( segment ); 


this.vertices.push( vertex ); 


Uvs.push( new THREE.Vector2( ( vertex.x / radius + 1 ) / 2， 
( vertex.y / radius + 1 ) / 2 ) ); 


var n = new THREE.Vector3( 0, 0, 1 ); 
for ( i= 1; i <= segments; i ++ ) { 
var v1 = i; 
var v2 =ii+1; 


var v3 = 0; 


this.faces.push( new THREE.Face3( v1, v2, v3, [ n, n,n ] ) ); 
this.faceVertexUvs[ 0 ].push( [ uvs[ i ], uvs[ i + 1 ], centerUV ] ); 


} 


this.computeCentroids(); 
this.computeFaceNormals(); 


this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius ); 
}; 
THREE.CircleGeometry.prototype = Object.create( THREE.Geometry.prototype ); 


THREE.CircleGeometry 的 构造 函数 在 xy 平面 上 生成 了 一 个 平面 圆 形 ， 这 表示 该 形状 中 的 所 
有 的 z 值 都 被 设 成 0。 整个 算法 的 核心 是 用 于 计算 这 样 一 个 形状 的 顶点 数据 的 代码 ， 这 上段 
代码 包含 在 第 一 个 for 循环 中 : 


vertex.x = radius * Math.cos( segment ); 
vertex.y = radius * Math.sin( segment ); 


了 实 上 ， 这 个 3D 圆 形 是 由 围绕 中 心 旋转 的 多 局 三 角形 构建 而 成 的 。 三 角形 的 数量 越 多 ， 
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构造 出 来 的 圆 形 就 更 接近 于 光 请 的 圆周 。 如 图 4-4 所 示 。 


























4-4: 由 三 角形 组 成 的 THREE.CircLeGeometry 





第 一 个 循环 体 仅 创建 了 圆周 顶点 位 置 的 x 和 y 坐标。 现在 我 们 需要 为 每 个 三 角形 创建 一 个 
面 片 (face， 即 多 边 形 ) 对 象 ， 面 片 对 象 由 三 个 顶点 组 成 : 定位 于 原点 的 中 心 点 ， 以 及 圆 
周 上 的 另外 两 个 点 。 第 二 个 循环 进行 了 这 一 步 工作 ， 并 将 生成 的 数据 填充 到 this.faces 数 
组 中 。 每 个 面 片 对 象 包含 this.vertices 数组 中 的 三 个 顶点 数据 ， 分 别 以 索引 数 v1、v2、 
v3 来 表示 。 注 意 ，v3 的 值 始终 为 0， 这 代表 存储 在 this.vertices 第 一 个 元 素 的 原点 位 置 
数据 。( 回 忆 第 2 章 的 WebGL 细节 ， 我 们 曾经 使 用 gl.drawElements() 方法 来 绘制 三 角形 
序列 ， 三 角形 的 顶点 数据 以 索引 数组 的 形式 存储 。 在 这 里 我 们 实现 了 同样 的 事情 ， 不 过 这 
些 细 节 被 Three.js 封装 起 来 了 。) 


我 们 还 应 该 广 意 到 ， 每 个 循环 中 都 包含 了 一 个 细节 : 纹理 坐标 的 计算 。WebGL 本 身 并 不 
知道 如 何 将 纹理 图 片上 的 像素 点 映射 到 各 个 三 角形 上 ， 除 非 我 们 告诉 它 应 该 如 何 做 。 与 
我 们 构建 顶点 值 的 方式 类 似 ， 这 两 个 for 循环 同时 构建 了 纹理 坐标 ， 又 称 UV 坐标 (UV 
coordinates) ， 并 将 这 些 数据 存储 在 this.faceVertexUVs 中 。 


回忆 一 下 ， 纹 理 坐 标 是 为 每 个 顶点 定义 的 一 对 浮 点 数 ， 通 常 取 值 范围 是 0 到 1。 这 些 值 对 
应 位 图 数据 上 的 x、y 偏 移 量 ， 着 色 器 会 利用 这 些 数据 从 位 图 上 获取 像素 信息 。 我 们 计算 前 
两 个 顶点 纹理 坐标 的 方式 和 计算 其 顶点 坐标 数据 的 方式 十 分 类 似 ， 都 使 用 了 旋转 角度 的 余 
弦 来 计算 x 值 ， 正 弦 来 计算 y 值 。 不 同 之 处 在 于 纹理 坐标 通过 除 以 圆 的 半径 值 来 将 值 限定 
在 [9..1] 范围 内 。 全 部 三 角形 第 三 个 顶点 的 、 对 应 几何 图 形 原点 位 置 的 纹理 坐标 ， 在 2D 
图 像 上 的 相应 位 置 是 图 像 的 中 心 点 (0.5, 0.5)。 
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邮 


那么 UV 的 含义 是 什么 呢 ? 字母 U 和 V 分 别 代表 一 张 2D 纹理 图 片 的 水 平 轴 
和 垂直 轴 ， 因 为 X、Y 和 ZZ 已 经 被 用 来 表示 物体 3D 坐标 系统 中 的 三 轴 。 想 
要 对 UV 坐标 体系 和 UV 映射 (UV mapping) 有 更 多 的 了 解 ， 请 访问 其 维基 
百科 词 条 (http://en.wikipedia.org/wiki/UV_mapping) 机 

















在 顶点 和 UV 数据 准备 好 之 后 ，Three.js 便 可 以 开始 准备 进行 几何 形状 的 泻 染 。THREE. 
Circle 构造 函数 结尾 处 的 代码 的 作用 是 借助 几何 形状 基 类 提供 的 辅助 函数 进行 持久 化 操 
作 。computeCentroids() 函数 通过 遍历 几何 形状 的 全 部 顶点 并 计算 平均 位 置 的 方式 来 找到 
形状 的 几何 中 心 点 。 

computeFaceNormals() 非常 重要 ， 因 为 物体 的 法 向 量 (normal vector， 简 称 normal) 决定 
了 物体 如 何 被 着 色 。 对 一 个 平面 的 圆 形 来 说 ， 每 个 面 片 的 法 向 量 都 垂直 于 几何 形状 本 身 。 
computeFaceNormals() 通过 计算 出 来 的 垂直 于 组 成 圆 的 每 个 三 角形 所 确定 的 平面 的 向 量 来 
定义 圆 的 法 向 量 。 面 片 通常 被 描绘 为 一 个 平面 阴影 模式 这 染 的 三 角形 ， 如 图 4-5 所 示 。 
































法 向 量 





顶点 0 











图 4-5: 面 片 通常 以 一 个 平面 阴影 泻 染 的 三 角形 来 表示 


最 后 ， 构 造 函 数 为 物体 初始 化 一 个 包围 盒 ， 在 这 个 示例 中 ， 包 围 盒 是 一 个 球体 ， 包 围 盒 在 
拾取 、 选 中 以 及 图 形 演 染 优化 中 起 到 重要 作用 。 


4.1.4 用 于 优化 网 格 演 染 的 BufferGeometry 


Three,js 最 近 引 进 了 一 类 名 为 THREE.BufferGeometry 的 优化 版 几何 形状 。THREE. 
BufferGeometry 将 数据 以 类 型 数组 的 方式 存储 ， 这 节省 了 用 于 处 理 JavaScript 数字 类 型 数 
组 的 额外 开销 。 这 个 类 也 可 以 很 方便 地 用 于 场景 背景 和 支柱 等 顶点 值 不 会 发 生 改变 并 且 不 
会 在 场景 中 移动 的 固定 物体 上 。 如 果 你 确定 一 个 物体 是 固定 的 ， 那 么 你 可 以 为 其 创建 一 个 
THREE.BufferGeometry 对 和 象 ，Three.js 会 进行 一 系列 的 优化 来 快速 演 染 这 类 物体 。 
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4.1.5 从 建 模 软件 包 中 导入 网 格 数据 


到 目前 为 止 我 们 一 直 在 研究 如 何 用 代码 来 创建 几何 形状 。 不 过 多 数 时 候 ， 我 们 的 应 用 并 不 
直接 使 用 编程 方式 来 构造 几何 形状 ， 而 是 直接 在 程序 中 载 入 用 专业 的 建 模 软件 (例如 3ds 
Max、Maya 和 Blender) 所 构建 的 3D 模型。 


Three.js 提供 了 一 系列 用 于 转换 和 加 载 模 型 文件 的 静态 函数 。 下 面 我 们 来 观看 一 个 加 载 网 
格 的 示例 ， 包 括 其 几何 形状 和 材质 。 运 行 Three.js 工程 目录 下 的 examples/webgl loader 
obj_mtl.html 文件 ， 你 会 看 到 图 4-6 所 示 的 模型 。 
























































~ OBJMTLLOader test 














4-6: 从 Wavefront OBJ 格式 文件 中 加 载 的 网 格 数 据 


这 里 描绘 的 男性 形象 通过 Wavefront OBJ 格式 (文件 后 缀 .OBJ ) 的 文件 导入 。 这 是 一 个 
流行 的 、 基 于 文本 的 模型 格式 ， 许 多 建 模 软 件 都 支持 导出 这 种 格式 的 文件 。OBJ 格式 文 
件 简单 而 有 限 ， 它 仅仅 包含 几何 形状 的 数据 顶点 、 法 向 量 和 纹理 坐标 。Wavefront 开发 
了 男 一 种 用 于 存储 材质 数据 的 配套 文件 格式 MTL， 用 于 将 材质 和 OBJ 格式 的 模型 数据 
进行 关联 。 

Three.js 用 于 OBJ 格式 (包含 材质 ) 的 加 载 器 代码 位 于 examples/js/loaders/OBJMTLLoader. 
js。 稍 微 研究 一 下 它 的 工作 机 制 ， 你 就 会 发 现 ，Three.js 的 文件 加 载 器 使 用 预 置 的 geometry 
类 和 shape 类 将 载 入 的 OBJ 格式 文件 转换 为 Three.js 中 的 THREE.Geometry 几何 形状 对 象 ， 

MTL 格式 转换 器 将 MTL 格式 的 文件 转换 为 Three.js 可 以 识别 的 材质 格式 。 生 成 的 几何 形 
状 对 象 和 材质 对 象 最 终 被 整合 到 一 个 THREE.Mesh 对 象 中 ， 并 添加 到 场景 


Three.js 为 多 种 文件 格式 提供 了 加 载 器 示例 。 甚 中 某 些 格式 只 提供 了 对 几何 形状 和 材质 
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的 支持 ， 但 另 一 些 可 能 更 为 复杂 : 包括 整个 场景 、 相 机 、 灯 光 和 动画 。 我 们 将 在 第 8 章 
对 这 些 格式 (以 及 用 于 编辑 它们 的 工具 ) 进行 详细 说 明 ， 第 8 章 主 要 讲述 创建 内 容 的 各 
种 途径 。 

Three.js 提供 的 多 数 文件 加 载 器 并 不 包含 在 核心 的 库 代 码 中 ， 而 是 包含 在 示 
例文 件 中 。 你 需要 在 你 的 项 目 文件 中 另行 引入 加 载 器 文件 。 除 非特 别 往 明 ， 
否则 这 些 加 载 器 和 整个 Three.js 项 目 使 用 同样 的 开源 许可 证 ， 你 可 以 自由 地 
使 用 它们 。 


























4.2 场景 图 和 空间 变换 的 层级 结构 


WebGL 并 没有 原生 的 3D 场景 概念 ， 它 仅仅 提供 了 将 图 像 绘制 到 画布 上 的 基础 API。 场 景 
的 结构 通常 由 应 用 自行 提供 。Three.js 基于 成 熟 的 场景 图 (scene graph) 概念 定义 了 一 个 结 
构 化 场景 的 模型 。 场 景 图 代表 一 个 以 父子 关系 层级 结构 存储 的 3D 物体 集合 ， 场 景 图 的 根 
市 点 通常 用 root 变量 来 表示 。 应 用 从 根 市 点 开始 递归 地 渲染 场景 的 每 个 子 层级 。 


4.2.1 利用 场景 图 来 管理 复杂 场景 


场景 图 在 表示 具有 层级 结构 的 复杂 物体 时 特别 有 用 。 想 象 一 个 机 器 人 、 一 辆 车 ， 或 者 一 个 
太阳 系 。 这 些 物体 都 包含 一 系列 的 部 件 一 一 四 肢 、 轮 子 、 卫 星 一 一 这 些 部 件 都 包含 自 有 的 
行为 。 场 景 图 同时 允许 这 些 物体 按 需 被 当 作 分 离 的 组 件 或 完整 的 组 合 来 处 理 。 这 不 仅仅 是 
出 于 结构 组 织 上 的 便利 ， 它 同时 提供 了 一 项 被 称 为 变换 层级 (transform hierarchy) 的 重要 
能 力 ， 在 这 个 体系 中 ， 一 个 物体 的 子 物 体 继承 了 父 层 级 的 变换 信息 (平移 、 旋 转 、 缩 放 ) 。 
壁 如 ， 当 你 使 用 动画 控制 一 辆 小 汽车 的 模型 沿 特定 轨迹 运动 的 时 候 ， 小 汽车 的 整体 沿 轨迹 
运动 ， 而 小 汽车 的 轮子 同时 在 旋转 。 通 过 将 轮子 设置 为 小 汽车 主体 的 子 元 素 ， 你 可 以 在 你 
的 代码 中 动态 地 控制 小 汽车 沿 着 轨迹 运动 ， 而 轮子 也 将 跟随 小 汽车 主体 在 3D 空间 中 沿 同 
样 轨 迹 运动 ， 你 无 需 另 行为 轮子 编写 沿 轨迹 运动 的 动画 ， 只 需 设 定 它们 的 旋转 动画 。 


“图 ”这 个 词 的 使 用 ， 对 于 Three.js 的 场景 图 来 说 并 不 十 分 精确 。 在 3D 泻 染 
中 ， 场 景 图 通常 被 表示 为 一 个 有 向 无 环 图 (Directed Acyclic Graph，DAG)。 
在 这 种 数据 结构 中 ， 节 点 以 父子 关系 存储 ， 任 何 一 个 物体 都 可 能 同时 拥有 多 
个 父 级 元 素 。 在 Threejjs 的 场景 图 中 ， 一 个 物体 只 能 同时 拥有 一 个 父 级 元 素 。 
尽管 出 于 技术 术语 统一 的 考虑 ，Three,js 的 层级 结构 被 称 为 一 个 “图 ”， 但 从 
更 准确 的 角度 来 说 ， 这 是 一 个 树 结构 。 如 果 希 望 获得 更 多 关于 数学 意义 上 
的 “图 ”的 信息 ， 请 参考 相应 的 维基 百科 词 条 (https://en.wikipedia.org/wiki/ 
Directed_acyclic_graph ) 。 


































































































4.2.2 Three.js 中 的 场景 图 


Three.js 中 最 基本 的 对 象 类 型 是 THREE.0bject3D (Three.js 工程 目录 下 的 src/core/Object3D js 
文件 )。 它 是 所 有 可 见 物体 (如 网 格 、 线 条 、 粒 子 系统 ) 的 基 类 ， 同 时 也 是 场景 图 层级 结 
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构 组 织 的 基本 要 素 。 


每 个 0bject3D 对 象 都 包含 它 自身 的 变换 信息 ， 这 些 信息 分 别 存储 在 position (位 置 ， 即 平 
移 )、rotation 和 scale 属性 中 。 通 过 设置 这 些 属 性 ， 你 可 以 移动 、 旋 转 和 缩放 相应 的 物 
体 。 如 果 这 个 物体 包含 后 代 〈 子 元 素 以 及 子 元 素 的 子 元 素 )， 后 代 也 将 继承 这 些 变换 。 如 
果 后 代 同 时 具备 自己 的 变换 ， 那 么 这 个 变换 将 与 父 级 元 素 的 变换 琶 加 生效 ， 变 换 通 过 整个 
层级 结构 层 层 传 递 。 我 们 来 看 一 个 例子 。 图 4-7 展示 了 一 个 非常 简单 的 变换 层级 : cube 是 
cubeGroup 的 直接 后 代 ; sphereGroup 也 是 cubeGroup 的 直接 后 代 (也 就 是 说 ， 它 是 cube 的 
一 个 兄弟 元 素 ) ; 而 sphere 和 cone 都 是 sphereGroup 的 后 代 。 




















图 4-7: Three.js 场景 图 和 变换 层级 


通过 加 载 示 例文 件 Chapter 4/threejsscene.html 来 运行 这 个 示例 。 你 会 看 到 图 中 的 立方 体 
(cube)、 球 体 (sphere) 和 圆锥 (cone) 分 别 在 旋转 。 你 可 以 用 鼠标 点 击 内 容 区 域 来 旋转 整 
个 场景 ， 或 者 拖 动 场景 下 方 的 请 块 来 对 整个 场景 进行 缩放 。 

例 4-2 展示 了 使 用 变换 层级 结构 来 创建 和 操作 场景 图 的 相关 代码 。 重 要 的 代码 行 用 粗 
体 标明 。 首 先 ， 我们 通过 创建 一 个 0bject3D 对 象 cubeGroup 来 初始 化 整个 场景 。 这 个 
对 象 将 作为 整个 场景 图 的 根 。 随 后 我 们 将 立方 体 (cube) 网 格 以 及 另 一 个 0bject3D 对 
象 sphereGroup 添加 到 cubeGroup 对 象 中 。 球 体 (sphere ) 和 圆锥 (cone) 被 添加 到 
sphereGroup 对 象 中 。 同 时 我 们 将 圆锥 (cone) 稍微 往 上 挪 了 一 些 一 一 通过 设置 它 的 
position 属性 。 





然后 我 们 需要 设置 这 些 物体 的 动画 : 在 animate() 函数 中 ， 我 们 可 以 看 到 ， 当 sphereGroup 





对 象 旋转 的 时 候 ， 它 内 部 的 球体 也 同时 在 进行 自转 。 贺 











锥 自 








身 旋转 的 同时 在 空间 中 围绕 球 





体 公转 。 注 意 在 每 个 动画 帧 的 变化 中 ， 我 们 并 没有 为 球体 的 自转 和 圆锥 的 公转 单独 编写 代 
码 ， 这 两 个 物体 都 自动 继承 了 父 级 元 素 sphereGroup 对 象 的 变换 数据 。 类 似 地 ， 实 现 整个 








整个 场景 的 旋转 和 缩放 交互 也 非常 简单 : 只 需 设 置 cubeGroup 对 象 的 rotation 和 scale 属 




















性 ， 这 些 变换 在 Three.js 中 就 会 自动 冒 泡 ， 作 用 于 它 的 后 代 元 素 。 


例 4-2: 一 个 包含 变换 层级 的 场景 


function animate() { 


var now = Date.now(); 

var deltat = now - currentTime; 
currentTime = now; 

var fract = deltat / duration; 
var angle = Math.PI * 2 * fract; 
// 绕 y 轴 旋转 立方 体 


Cube .rotation.y += angle; 





// 围绕 其 坐标 y 轴 旋转 球体 分 组 


SphereGroup.rotation.y -= angle / 2; 




















// 围绕 其 坐标 x 轴 旋转 圆锥 (向 前 翻滚 ) 


cone.rotation.x += angle; 











function createScene(canvas) { 








// 创建 Three.js 泻 染 器 并 将 其 添加 到 canvas 中 





renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } ); 


// 设置 视 口 尺寸 


renderer.setSize(canvas.width, canvas.height); 


// 创建 一 个 Three.js 场 景 
scene = new THREE.Scene(); 





// 添加 一 个 相机 以 便 观察 整个 场景 


Camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 


1, 4000 ); 
camera.position.z = 10; 
scene.add(camera); 


// 创建 一 个 用 于 容纳 所 有 物体 的 分 组 
cubeGroup = new THREE .Object3D; 


// 添加 一 个 相机 以 便 观察 整个 场景 


var light = new THREE.DirectionalLight( QOxffffff, 1.5); 


// 将 灯光 放置 在 场景 外 ,指向 原点 
light.position.set(.5, .2, 1); 
cubeGroup.add( light); 





// 为 立方 体 创建 一 个 带 纹理 的 Phong 材 质 
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// 首先 ,创建 纹理 贴图 

var mapUrl = "../images/ash_uvgrid01.jpg"; 

var map = THREE.ImageUtils.loadTexture(mapUrl); 

var material = new THREE.MeshphongMaterial({ map: map }); 








// 创建 立方 体 几何 形状 
var geometry = new THREE.CubeGeometry(2, 2, 2); 





// 其 次 ,将 材质 和 几何 形状 整合 到 一 个 网 格 中 


Cube = new THREE.Mesh(geometry, material); 


// 将 网 格 向 观察 者 倾斜 
cube.rotation.x = Math.PI / 5; 
cube.rotation.y = Math.PI / 5; 


也 


// 将 立方 体 网 格 添加 到 分 组 
cubeGroup.add( cube ); 








// 为 球体 创建 一 个 分 组 
sphereGroup = new THREE.0bject3D; 
cubeGroup.add(sphereGroup); 


// 将 球体 分 组 移动 到 立方 体 的 后 上 方 


sphereGroup.position.set(0, 3, -4); 








// 创建 球体 几何 形状 
geometry = new THREE.SphereGeometry(1, 20, 20); 

















// 将 材质 和 几何 形状 整合 到 一 个 网 格 中 


sphere = new THREE.Mesh(geometry, material); 


// 将 球体 网 格 添加 到 分 组 中 
sphereGroup.add( sphere ); 





// 创建 圆锥 几何 形状 
geometry = new THREE.CylinderGeometry(0, .333, .444, 20, 5); 





// 接着 将 材质 和 几何 形状 整合 到 一 个 网 格 中 


cone = new THREE.Mesh(geometry, material); 





// 将 圆锥 移动 到 球体 的 上 方 , 并 和 球体 保持 一 定 距离 


cone.position.set(1, 1, -.667); 

















// 将 圆锥 网 格 添加 到 分 组 中 


sphereGroup.add( cone ); 





// 现在 将 分 组 添加 到 场景 


scene.add( cubeGroup ); 


} 
function rotateScene(deltax) 
{ 
cubeGroup.rotation.y += deltax / 100; 
$s("#rotation").html("rotation: 0," + cubeGroup.rotation.y.toFixed(2) + ",0"); 
} 





大 
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function scaleScene(scale) 


{ 


cubeGroup.scale.set(scale, scale, scale); 
$s("#scale").html("scale: " + scale); 


} 


4.2.3 平移 、 旋 转 和 缩放 的 表示 


在 Three.js 中 ， 变 换 是 通过 3D 矩阵 计算 来 实现 的 ， 所 以 很 自然 ，0bject30 的 变换 要 素 使 
用 三 维 向 量 表示 : 位 置 (position)、 旋 转 (rotation) 和 缩放 (scale)。position 的 含义 
非常 明显 : x、y 和 z 要素 分 别 定 义 了 物体 到 原点 的 位 置 偏 移 。scale 的 含义 也 非常 直观 : 
XxX、y 和 = 元 素 分 别 用 于 表示 物体 在 三 个 维度 上 的 缩放 程度 。 


rotation 的 几 个 要 素 的 含义 需要 稍微 解释 一 下 : x、y 和 z 分 别 表示 物体 围绕 相应 坐标 轴 的 
旋转 弧度 ， 举 例 来 说 ，(06，Math.PI / 2，0) 表示 物体 围绕 自身 的 y 轴 旋转 了 90 度 。( 注 意 
旋转 角度 用 弧度 来 表示 ，2r 弧度 等 于 360 度 )。 这 种 旋转 信息 的 表示 方式 一 一 使 用 围绕 x、 
y、z 三 轴 的 旋转 角度 来 组 合 表 示 整 个 物体 旋转 的 方式 一 一 被 称 为 欧 拉 角 (Euler angle)。 我 
想 ，Mr.doob 之 所 以 采用 欧 拉 角 来 作为 默认 的 表示 方式 ， 是 由 于 这 种 方式 非常 直观 并 且 便 
于 处 理 ， 尽管 如 此 ， 在 实践 中 欧 拉 角 这 种 表示 方式 还 是 会 遇 到 很 多 计算 处 理 上 的 问题 ， 所 
以 Threejs 同时 支持 使 用 四 元 数 来 表示 旋转 。 这 是 区 别 于 欧 拉 角 的 另 一 种 旋转 表示 形式 ， 
相对 而 言 ， 它 需要 编写 更 多 代码 来 处 理 旋转 运算 相关 的 事务 。 四 元 数 非常 精确 ， 但 操作 起 
来 并 不 直观 。 

在 Three.js 内 部 ， 每 个 0bject3D 都 持 有 一 个 用 于 存放 各 种 变换 信息 的 矩阵 。 拥 有 多 重 祖先 
元 素 的 物体 递归 地 用 祖先 元 素 的 变换 矩阵 来 乘 自身 的 变换 矩阵 ， 从 而 得 到 自身 最 终 的 变换 
结果 ， 也 就 是 说 ，Three.js 在 每 次 场景 演 染 的 时 候 都 遍历 整个 场景 图 ( 树 结构 ) 的 叶 节 点 
来 计算 每 个 物体 的 变换 和 矩阵。Three.js 为 0bject3D 对 象 定义 了 一 个 matrixAutoUpdate 属性 ， 
当 这 个 属性 被 设 为 false 的 时 候 ， 上 述 的 行为 (自动 继承 父 级 元 素 变换 ) 被 禁止 。 尽 管 如 
此 ， 这 个 特性 很 有 可 能 会 引发 一 些 奇怪 的 bug (“为 什么 我 的 动画 不 刷新 了 ? “) ， 所 以 请 说 
慎 使 用 它 。 


4.3 材质 


我 们 在 WebGL 应 用 中 看 到 的 可 见 形状 都 持 有 一 些 用 来 表示 外 观 的 属性 ， 如 颜色 、 着 色 方 
法 以 及 纹理 (位 图 )。 如 果 使 用 底层 的 WebGL API 来 构建 这 些 属 性 ， 我 们 需要 自行 编写 
GLSL 着 色 器 代码 ， 这 需要 相对 高 级 的 编程 技巧 ， 就 算 你 需要 创建 的 仅仅 是 最 简单 的 视觉 
效果 。 所 幸 Three.js 预先 为 我 们 准备 好 了 GLSL 代码 ， 并 封装 在 材质 (material) 对 象 中 。 


4.3.1 标准 网 格 材质 

回忆 一 下 ，WebGL 需要 开发 者 提供 一 个 可 编程 着 色 器 ， 用 于 每 个 物体 的 绘制 。 你 可 能 
经 注意 到 了 ， 在 本 章 中 ， 至 今 为 止 我 们 并 没有 提 及 任何 与 GLSL 着 色 器 源 代 码 相 关 的 内 
容 。 原 因 在 于 ，Threejs 已 经 为 我 们 预先 编写 好 了 “ 开 箱 即 用 ”的 着 色 器 代码 ， 这 些 着 色 










































































































































































Threejs 中 的 图 形 和 泻 染 | 61 


器 代码 以 一 个 预 置 的 GLSL 代码 库 的 形式 提供 。 


典型 的 场景 图 库 和 流行 的 建 模 工具 通常 将 着 色 器 作为 材质 的 一 家 
定义 了 3D 网 格 、 点 或 者 线 元 外 观 属性 的 对 象 ， 这 些 外 观 属性 包括 颜 

















(transparency) 以 及 发 光 (shininess)。 材 质 还 包含 (也 可 以 不 包含 
覆盖 物体 表面 的 位 图 。 材 质 属性 结合 网 格 的 顶点 数据 、 场 景 的 光 有 

















位 置信 息 和 其 他 全 局 属性 ， 来 决定 每 个 物体 的 最 终 泻 染 效果 。 


Three.js 提供 了 预 置 类 MeshBasicMaterial、MeshPhongMaterial 和 











We 














了 分 来 实现 ， 材 质 是 一 个 
色 (color)、 透 明度 
纹理 贴图 ， 这 是 一 个 
有 信息 ， 可 能 还 包括 相机 


MeshLambertMaterial 来 


支持 常用 的 材质 类 型 。(Mesh 前 绥 表 示 这 些 材 质 类 型 可 以 用 于 网 格 对 象 。 相 对 地 ， 其 他 类 
型 的 对 象 ， 如 线条 对 象 和 粒子 对 象 ， 也 有 其 相应 的 适用 材质 类 型 。 查 看 Three.js 下 的 src/ 
materials 目录 ， 以 了 解 最 新 的 材质 集合 。) 这 些 材质 类 型 使 用 三 种 著名 的 材质 技术 来 实现 。 





。 unlit (又 称 prelit) 





当 使 用 这 种 材质 类 型 时 ， 仅 纹理 、 颜 色 和 透明 度 属性 会 被 用 于 物体 的 外 观 泻 染 。 

















场景 的 


光照 对 物体 的 外 观 不 会 产生 影响 。 这 是 用 于 扁平 风格 渲染 效果 或 者 绘制 无 需 复 杂 着 色 效 
果 的 简单 几何 形状 的 绝 佳 材 质 类 型 。 这 种 材质 对 已 经 将 光照 信息 和 材质 结合 计算 并 预先 








输出 到 纹理 中 (例如 使 用 3D 建 模 工具 创建 并 使 用 了 烘 培 贴 
此 时 物体 的 外 观 效果 无 需 由 浑 染 器 再 次 进行 计算 。 


。 Phong 着 色 法 





图 ) 的 情况 同样 适用 ， 











因为 


这 种 材质 提供 了 一 个 简单 而 优秀 的 仿真 风格 的 高 性 能 着 色 模型 。 它 已 经 成 为 迅速 而 简便 
地 实现 明暗 视觉 效果 的 常规 方法 ， 同 时 许多 游戏 和 应 用 也 还 在 使 用 这 种 着 色 方法 。 用 





Phong 着 色 法 泻 染 的 物体 会 在 光线 直接 照射 的 地 方 显示 高 光 区 域 ( 镜 


























面 的 亮度 随 各 点 到 光源 的 距离 产生 豪 减 ， 而 背光 区 域 会 被 演 染 成 完全 黑暗 的 效果 。 


。 并 伯 反 射 (Lambertian reflectance) 








在 Lambert 着 色 法 中 ， 物 体外 观 的 明暗 不 随 观察 者 视角 的 改变 而 改变 。 


看 反射 ) ， 物 体 表 


它 非 常 适 合 于 用 


来 表现 云 杂 等 会 漫 反 射 大 部 分 光线 的 物体 ， 或 者 像 月 球 这 类 具有 高 反射 率 (表面 反射 光 


非常 明亮 ) 的 卫星 。 





运行 本 书 示例 中 的 Chapter 4/threejsmaterials.html， 你 可 以 更 直观 地 感受 Three.js 材质 的 不 





同类 型 。 在 如 图 4-8 所 示 的 页 面 中 ， 展 示 了 一 个 带 月 球 表面 纹理 贴 




















图 的 、 被 照 亮 的 球体 。 


月 球 是 用 于 描绘 各 材质 类 型 差异 的 绝 佳 素材 。 例 如 点 击 单 选 按钮 ， 在 Phong 和 Lambert 材 





质 间 切 换 ， 对 比 物体 使 用 Lambert 着 色 方 法 相 比 使 用 Phong 着 色 方 法 看 起 来 是 否 更 合理 














了 。 此 外 使 用 Basic (unlit) 着 色 器 ， 观 察 仅仅 使 用 纹理 泻 染 而 不 考虑 光照 的 情况 下 球体 的 


外 观 。 











尝试 改变 漫 反 射 和 镜面 反射 的 颜色 ,观察 其 效果 。 材 质 的 漫 反 射 颜色 定义 了 物体 在 一 个 方 
向 上 能 反射 多 少 来 自 光 源 的 光线 ， 包 括 定向 光 、 点 光源 和 聚光灯 (我 们 会 在 下 一 节 中 详细 





讨论 这 些 灯 光 类 型 )。 镜 面 反 射 颜色 与 场景 灯光 合成 创建 出 物体 表 榴 

















效果 。( 注 意 镜面 高 光 仅 仅 在 使 用 了 Phong 材质 的 前 提 下 生效 ， 其 1 
看 反射 颜色 。) 此 外 ， 尝 试 关 闭 纹理 贴图 ， 你 可 以 更 直观 地 观察 这 种 材质 在 简单 球体 上 产 
生 的 效果 。 最 后 ， 勾 选 “wireframe” 选 项 来 观察 这 些 设置 对 线 机 












































E 泻 染 产 生 了 何 种 影响 。 


i 正 对 光源 的 顶点 高 光 
也 类 型 的 材质 不 支持 镜 








Three.js Materials Use these controls to change properties 











4-8: Three.js 标准 网 格 材 质 类 型 一 一 Basic (unlit)、Phong 和 Lambert ( 另 见 彩 插图 4-8) 


4.3.2 ”使 用 多 重 纹理 增添 殖 真 效果 


上 面 的 示例 展示 了 材质 是 如 何 用 于 定义 一 个 物体 的 外 观 的 。Three.js 的 大 多 数 材质 类 型 都 
ee 允许 在 一 个 材质 中 使 用 多 个 纹理 ， 或 者 说 
多 重 纹理 的 意图 在 于 ， 提 供 一 由 形 来 表示 物 
体 ， 或 使 用 多 道 演 染 和 工序 来 反复 处 理 物 体 的 方案 。 这 里 提供 了 一 些 例子 ， 用 于 展示 Three. 
js 支持 的 常见 多 重 纹理 贴图 技术 。 


四 廿 贴图 。 轧 凸 贴图 (bump map) 用 于 禁 代 物体 表面 的 法 向 量 来 为 表面 提供 凹凸 的 视觉 
效果 。 位 图 的 像素 信息 被 当 作 高 度 而 非 色 彩信 息 来 进行 处 理 。 举 例 来 说 ,一 个 值 为 0 的 像 
素 点 代表 没有 进行 任何 偏 移 ， 而 一 个 非 零 的 值 可 以 用 来 表示 相对 物体 表面 的 正 向 偏 移 。 通 
常 ， 单 通道 的 黑白 位 图 可 用 于 布 省 性 能 开销 ， 而 完整 的 、 可 以 存储 更 多 数值 信息 的 RGB 
通道 位 图 则 可 以 用 来 表示 更 多 的 细节 。 使 用 位 图 来 代替 3D 向 量 的 原因 是 位 图 更 紧凑 ， 并 
且 为 着 色 器 内 部 代码 提供 了 一 个 用 于 计算 正 位 移 的 更 高 效 的 方法 。 打 开 示 例文 件 example 
Chapter 4/threejsbumpmap.html， 实 际 感 受 一 下 凹凸 贴图 的 效果 ， 如 图 4-9 所 示 。 打 开 / 关 
闭 月 球 的 纹理 ， 并 改变 漫 反 射 和 镜面 反射 颜色 来 观察 不 同 的 效果 ， 你 也 许 已 经 注意 到 ， 尽 
管 效 果 非 常 酷 ， 它 也 可 能 产生 不 佳 的 效果 。 但 不 管 怎 么 说 ， 凹 凸 贴图 为 添加 真实 细 市 提供 
了 一 个 低 成 本 的 方法 。 













































































































































































Threejs 中 的 图 形 和 泻 染 | 63 











Three.js Textures: Bump-Mapping Use these controls to change properties 





Drag the mouse to rotate the scene 
Drag the slider to scale 














4-9: 巴巴 贴图 ( 另 见 彩 插 图 4-9) 

















在 Three,js 中 使 用 凹凸 贴图 非常 简单 。 只 需 在 THREE.MeshPhongMaterial 构造 器 初始 化 的 时 
候 将 传人 参数 的 bumpMap 属性 设置 为 一 个 有 效 纹 理 即 可 : 


material= new THREE.MeshPphongMaterial({map: map， 
bumpMap: bumpMap }); 


法 向 量 贴图 。 法 向 量 贴图 (normal map) 提供 了 一 个 能 够 比 凹 凸 贴图 展现 更 多 细节 的 方式 ， 
无 需 使 用 更 多 的 多 边 形 。 相 比 凹 凸 贴图 ， 法 向 量 贴图 的 体积 更 大 ， 对 计算 性 能 的 要 求 也 更 
高 。 法 向 量 贴图 的 工作 原理 是 将 实际 的 顶点 法 向 量 信息 编码 到 RGB 格式 位 图 的 数据 中 ， 
这 通常 会 比 相应 的 网 格 顶点 数据 有 更 高 的 分 辨 率 。 着 色 器 将 法 向 量 信息 和 光照 计算 ( 包 
括 综 合 处 理 当 前 的 相机 和 光源 信息 ) 相 结合 最 终 谊 染 出 物体 的 外 观 细 闻 。 打 开 示例 文件 
Chapter 4/threejsnormalmap.html， 查 看 法 向 量 贴图 的 实际 效果 。 法 向 量 位 于 图 4-10 的 右 下 
角 。 注 意 地 球 模型 的 海拔 信息 轮 廊 。 打 开 /关闭 法 向 量 贴图 来 对 比 法 向 量 贴图 是 如 何 为 地 
球 模型 提供 细节 的 ， 你 会 惊叹 于 区 区 一 个 位 图 竞 能 为 如 球体 这 样 简单 的 模型 提供 如 此 之 多 
的 细节 信息 。 













































































se these controls to change properties 








图 4-10: 使 用 法 向 量 贴图 的 地 球 


在 Three.js 中 使 用 法 向 量 贴 图 同样 十 分 简单 。 只 需 在 构造 THREE.MeshPhongMaterial 对 象 的 
时 候 ， 将 一 个 已 有 的 纹理 作为 normaLMap 属性 配置 传 入 即 可 : 


Material = new THREE.MeshPphongMaterial({ map: map， 
normalMap: normalMap }); 


环境 贴图 。 环 境 贴 图 (environment map) 为 使 用 其 他 纹理 来 提升 真实 度 提供 了 另 一 种 途 
径 。 环 境 贴图 模拟 了 物体 对 周围 环境 的 反射 ， 而 不 是 像 止 凸 贴图 和 纹理 贴图 那样 旨 在 为 物 
体 表面 添加 更 多 的 真实 细节 。 


打开 Chapter 4/threejsenvmap.html 查看 环境 贴图 的 示例 。 在 内 容 区 域 拖 搜 照 标 来 旋转 场景 ， 
或 者 使 用 鼠标 滚轮 对 场景 进行 放大 缩小 。 注 意 球 表面 的 图 像 呈现 为 它 周 围 天 空 背 景 的 贴图 
(如 图 4-11)。 事 实 上 ， 它 并 没有 真正 进行 这 样 的 处 理 ， 整 个 场景 的 背景 由 一 个 立方 体 的 内 
侧 表 面 构 成 ， 而 球体 只 是 简单 地 将 用 于 场景 背景 的 纹理 像素 泻 染 到 自身 的 表面 上 。 记 窍 在 
于 ， 用 于 球体 表面 的 材质 是 一 个 立方 体 纹理 (cube texture) 材质 这 是 一 个 由 六 个 不 同 的 
位 图 组 成 的 、 可 以 在 立方 体内 部 形成 一 个 连续 图 像 效 果 的 纹理 贴图 。 这 个 特殊 的 立方 体 材 
质 被 用 于 构建 一 个 天 空 全 景 的 背景 。 查 看 images/cubemap/skybox/ 文件 中 的 不 同文 件 ， 了 
解 这 个 场景 是 如 何 被 构建 出 来 的 。 由 于 采用 了 立方 体 纹理 ， 这 种 类 型 的 环境 贴图 被 称 为 立 
方 体 环境 映射 (cubic environment mapping)。 
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Use these controls to change properties 


Diffuse color 


Enwironment Map 罗 
rte es 














图 4-11; 立方 体 环 境 贴图 ， 具 有 逼真 场景 背景 和 反射 效果 


在 Three.js 中 使 用 立方 体 纹理 比 使 用 凹凸 贴图 或 法 向 量 贴图 要 稍微 复杂 一 些 ， 首 先 ， 我 
们 需要 创建 一 个 立方 体 纹理 ， 而 非 普 通 的 纹理 。 我 们 需要 使 用 Threejs 的 全 局 方法 
ImageUtiLs.LoadTextureCube()， 通 过 传 入 六 个 不 同 图 像 的 URL 来 创建 这 个 纹理 。 然 后 ， 
我 们 在 创建 MeshPhongMaterial 对 象 的 时 候 将 envMap 参数 设置 为 该 纹理 对 象 。 我 们 还 指定 
了 反射 率 (reflectivity) 的 值 ， 用 来 定义 立方 体 纹理 在 物体 渲染 时 被 物体 表面 材质 “ 反 
射 ”的 程度 。 在 这 个 例子 中 ， 我 们 指定 了 稍微 大 于 默认 值 1 的 值 ， 以 便 让 环境 贴图 看 起 来 
更 明显 些 。 





var path = "../images/cubemap/skybox/"; 


var urls = [ path + "px.jpg", path + "nx.jpg"， 
path + "py.jpg", path + "ny.jpg", 
path + "pz.jpg", path + "nz.jpg”]; 


envMap = THREE.ImageUtiLLs.LoadTextureCube( urls ); 
materials["phong-envmapped"] = new THREE.MeshBasicMaterial( 
{ color: Oxffffff, 
envMap : envMap， 
reflectivity:1.3} ); 


为 了 使 它 更 贴近 于 真实 的 效果 ， 我 们 还 需要 做 一 些 事 情 。 我 们 需要 将 反射 位 图 和 周围 环 
境 进 行 绑 定 。 为 此 我 们 创建 了 一 个 天 空 多 Rs 这 是 一 个 内 面 贴图 的 背景 立方 体 ， 
使 用 了 同样 的 位 图 图 像 ， 用 于 构建 一 个 天 空 全 景 。 这 本 身 需 要 非常 繁杂 的 工作 ， 不 过 所 
幸 Three.js 提供 了 内 建 的 辅助 函数 来 帮助 我 们 完成 这 件 事 情 。 除 了 内 置 的 标准 材质 Basic、 
Phong 和 Lambert 以 外 ，Three.js 还 提供 了 一 个 着 色 器 的 库 ， 包 含 在 全 局 变量 THREE. 
ShaderLib 中 。 我 们 使 用 立方 体 (cube geometry) 来 创建 一 个 网 格 ， 并 使 用 库 中 预先 定义 
的 “cube” 着 色 器 来 作为 立方 体 的 材质 。 它 使 用 我 们 刚才 用 于 环境 贴图 的 纹理 ， 来 泻 染 立 
方 体 的 内 部 。 





// 创建 天 空 盒 
var shader = THREE.ShaderLib[ "cube" ]; 
shader .uniforms[ "tCube" ].value = envMap; 


var material = new THREE.ShaderMaterial( { 
fragmentShader: shader.fragmentShader, 
vertexShader: shader .vertexShader, 


uniforms: shader.uniforms, 
side: THREE.BackSide 


} )， 


mesh = new THREE.Mesh(new THREE.CubeGeometry( 500, 500, 500 
scene.add( mesh ); 


4.4 光源 


), material); 


光源 照 亮 3D 场景 中 的 物体 。Three.js 定义 了 多 种 内 置 的 光源 类 型 ， 这 些 光源 类 型 对 应 建 模 
工具 和 其 他 场景 图 库 中 定义 的 光源 类 型 。 最 常用 的 光源 类 型 有 定向 光 (directional light)、 




















点 光源 (point light)、 和 聚光灯 (spotlight) 和 环境 光 (ambient light) 。 





颜色 和 强度 信 


。 定向 光 
实现 了 一 类 产生 定向 平行 光 的 光源 。 这 类 光源 没有 位 置信 息 ， 只 有 方向 、 
息 。( 事 实 上 ， 在 Threejs 里 面 ， 定 向 光 是 包含 一 个 位 置信 息 的 ， 不 过 它 仅 仅 被 用 来 结 

















合 男 一 个 向 量 一 一 目标 位 置 一 一 来 计算 光线 的 方向 。 这 显然 是 一 个 并 不 高 明 并 违反 直觉 





的 处 理 方式 ， 我 希望 Mr.doob 后 续 能 够 修复 它 。) 


bs 点 光源 
包含 位 置信 息 ， 但 不 包含 方向 信息 。 
。 有 聚光灯 





同时 具备 位 置 和 方向 信息 。 同 时 它们 提供 了 用 于 定义 聚光灯 内 圆锥 和 外 
度 ) 的 参数 ， 以 及 定义 它们 能 够 照 亮 多 远 距 离 的 参数 。 

。 环境 光 
没有 位 置 ， 也 没有 方向 。 它 均匀 地 投射 于 整个 场景 。 








圆锥 尺寸 ( 角 





所 有 的 Threejs 光源 类 型 都 支持 通用 的 intensity 属性 ， 它 定义 了 光源 的 强度 、 颜 色 和 





RGB 值 。 
光源 自身 并 没有 处 理 对 场景 的 影响 ， 它 们 的 值 和 特定 材质 的 属性 结合 起 来 ， 





用 来 定义 物体 


最 终 的 视觉 展示 效果 。MeshPhongMaterial 和 MeshLambertMaterial 定义 了 以 下 属性 。 


。 color 


又 称 漫 反射 颜色 (diffuse color)， 它 定义 了 物体 是 如 何 反射 来 自 一 个 方向 上 的 光 的 ( 例 





如 定向 光 、 点 光源 和 聚光灯 )。 
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。 ambient 

物体 对 环境 光 的 反射 程度 。 
。 emissive 

这 个 材质 属性 定义 了 一 个 物体 自身 发 光 的 颜色 ， 和 整个 场景 的 光源 无 关 。 
MeshPhongMaterial 材质 同时 支持 一 个 镜面 反射 (specular) 颜色 属性 ， 这 个 属性 和 场景 灯 
光 相 结合 ， 创 建 出 物体 朝向 光源 的 顶点 的 高 光 效 果 。 
回忆 一 下 ，MeshBasicMaterial 材质 会 包 略 所 有 灯光 的 影响 。 
图 4-12 展示 了 一 个 使 用 Threejs 灯光 类 型 创建 的 灯光 实验 。 打 开 Chapter 4/threejslights. 
html 运行 这 个 示例 。 这 个 场景 包含 四 个 不 同类 型 的 灯光 、 黑 白 纹 理 的 背景 平面 和 三 个 纯 白 
的 几何 体 ， 用 来 展示 不 同 灯 光 的 效果 。 你 可 以 通过 页 面 上 的 拾 色 器 控件 动态 地 改变 每 个 灯 
光 的 颜色 。 如 果 你 把 一 个 灯光 的 颜色 设 为 黑色 ， 那 么 这 个 灯光 将 会 被 完全 关闭 。 在 内 容 区 
域 拖 搜 鼠标 来 旋转 整个 场景 ， 并 观察 灯光 对 模型 不 同 部 分 造成 的 影响 。 



































Use these controls to change properties 


Directional 
Point 芭 
Spot 


Ambient 蒜 


Drag the mouse to rotate the camera 


Use the scroll wheel to zoom. 














图 4-12: 定向 光 、 点 光源 、 聚 光 灯 和 环境 光 ( 另 见 彩 插图 4-12) 


下 面 这 段 代 码 展 示 了 灯光 的 设置 。 位 于 场景 前 方 的 白色 定向 光照 亮 了 儿 何 体 前 方 的 白色 
区 域 。 蓝 色 的 点 光源 从 后 方 照 亮 物体 模型 ， 注 意 物体 后 方 地 板 上 的 蓝 色 区 域 。 通 过 定义 
spotLight.target.position 属性 ， 绿 色 的 聚光灯 的 锥 体 笼 置 了 靠近 场景 前 方 的 地 板 区 域 。 
最 后 ， 环 境 光 平均 地 为 场景 中 的 所 有 物体 提供 了 少量 的 亮度 。 使 用 控件 来 更 改 设置 ， 并 从 
各 个 角度 观察 场景 ， 以 更 直观 地 了 解 各 类 灯光 各 自 以 及 全 加 起 来 产生 的 效果 。 

// 创建 并 将 所 有 灯光 添加 到 场景 中 


directionalLight.position.set(.5, 0, 3); 
root.add(directionalLight); 














pointLight = new THREE.PointLight (0x0000ff，1，20); 
pointLight.position.set(-5, 2, -10); 
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root.add(pointLight); 


spotLight = new THREE.SpotLight (0x00ff00) ; 
spotLight.position.set(2, 2, 5); 
spotLight.target.position.set(2, 0, 4); 
root.add(spotLight); 


ambientLight = new THREE.AmbientLight ( 0x888888 ); 
root.add(ambientLight); 





这 里 做 个 友情 提示 ， 和 WebGL 中 的 其 他 东西 一 样 ， 灯 光 是 一 个 完全 人 为 创 
造 的 概念 。WebGL 只 能 处 理 缓冲 和 着 色 器 ， 开 发 者 需要 通过 编写 着 色 器 代 
码 来 合成 灯光 效果 。Three.js 提供 了 邻 人 震 ' 六 的 强大 的 材质 和 灯光 能 力 …… 
尤其 是 当 你 意识 到 这 些 完全 是 通过 JavaScript 代码 来 编写 的 时 候 。 当 然 ， 如 
果 WebGL 没有 提供 访问 GPU 的 能 力 ， 这 些 都 将 无 法 实现 。 

















4.5 阴影 


一 直 以 来 ， 设 计 师 都 使 用 阴影 造 更 加 真实 的 视觉 效果 。 通 常 这 些 阴影 都 是 伪造 的 、 
预演 染 的 效果 ， 移 动 场景 中 的 灯光 或 者 移动 带 阴 昌 多 的 物体 ， 都 会 破坏 这 种 效果 。 然 而 ， 
Three.js 支持 根据 当前 灯光 和 物体 的 位 置 进行 实时 阴影 泻 染 。 


Chapter 4/threejsshadows.html 中 的 示例 演示 了 如 何在 场景 中 增加 实时 阴影 。 如 图 4-13: 位 
于 地 板 上 方 、 场 景 前 方 的 聚光灯 使 物体 在 地 面 上 产生 了 阴影 。 注 意 阴影 是 如 何 随 着 立方 体 
的 旋转 变化 的 。 同 时 ， 当 地 板 旋转 时 ， 阴 景 并 没有 跟随 地 板 运动 。 如 果 阴 影 是 用 预 泻 染 伪 
造 的 ， 那 么 它 会 “ 粘 ” 在 地 板 上 ， 并 且 不 会 随 着 立方 体 的 旋转 而 变化 。 通 过 控件 来 更 改 灯 
光 设 置 ， 尤 其 是 聚光灯 ， 来 观察 阴影 是 如 何 动态 变化 的 。 



























































Threojs-Shadows se these controls to change properties 














图 4-13: 使 用 聚光灯 和 阴影 贴图 营造 实时 阴影 
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Three.js 使 用 一 项 名 为 阴影 贴图 (shadow mapping) 的 技术 来 支持 阴影 效果 。 浑 染 器 会 为 阴 

影 贴图 保存 一 张 额外 的 纹理 ， 演 染 器 会 将 阴影 区 域 泻 染 到 这 个 纹理 中 ， 并 在 片段 着 色 器 中 

将 其 用 于 合成 最 终 的 图 像 。 故 而 ， 在 Three.js 中 开局 阴影 需要 以 下 步骤 。 

(1) 在 泻 染 器 中 开启 阴影 贴图 。 

(2) 在 灯光 中 开启 阴影 并 设置 相关 参数 。THREE.DirectionalLight 和 THREE.SpotLight 两 种 
类 型 都 支持 阴影 。 

(3) 设置 哪些 物体 会 产生 和 接受 阴影 。 

让 我 们 来 看 看 这 些 步骤 在 代码 中 是 如 何 实现 的 。 例 4-3 中 用 粗 体 高 亮 的 代码 展示 了 在 

createScene() 国 数 中 添加 的 用 于 泻 染 阴影 的 代码 。 


例 4-3: Three.js 中 的 阴影 贴图 
var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 2048; 


















































function createScene(canvas) { 





// 创建 Three.js 演 染 器 并 将 其 添加 到 canvas 中 


renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } ); 





// 设置 视 口 尺寸 


renderer.setSize(canvas.width, canvas.height); 


// 开启 阴影 
renderer .shadowMapEnabled = true; 
renderer .shadowMapType = THREE.PCFSoftShadowMap; 


// 创建 Three.js 场 景 


scene = new THREE.Scene(); 


// 添加 一 个 相机 以 便 观 察 整 个 场景 

Camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 
1, 4000 ); 

camera.position.set(-2, 6, 12); 

scene.add(camera); 


// 创建 一 个 用 于 容纳 所 有 物体 的 分 组 
root = new THREE.Object3D; 


// 添加 一 个 相机 以 便 观察 整个 场景 
directionalLight = new THREE.DirectionalLight( Qxffffff, 1); 


号 


// 创建 并 将 所 有 灯光 添加 到 场景 
directionalLight.position.set(.5, 0, 3); 
root.add(directionalLight); 





spotLight = new THREE.SpotLight (QOxffffff); 
spotLight.position.set(2, 8, 15); 
spotLight.target.position.set(-2, 0, -2); 
root.add(spotLight); 


spotLight.castShadow = true; 
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spotLight.shadowCameraNear = 1; 
spotLight.shadowCameraFar = 200; 
spotLight.shadowCameraFov = 45; 


spotLight.shadowDarkness = 0.5; 


spotLight.shadowMapWidth = SHADOW_MAP_WIDTH; 
spotLight.shadowMapHeight = SHADOW_MAP_HEIGHT; 


ambientLight = new THREE.AmbientLight ( 0x888888 ); 
root.add(ambientLight); 








// 创建 一 个 用 于 容纳 球体 的 组 
group = new THREE.0bject3D; 
root.add(group); 








// 创建 一 个 纹理 贴图 

var map = THREE.ImageUtils.loadTexture(mapUrl); 
map.wrapS = map.wrapT = THREE.RepeatWrapping; 
map.repeat.set(8, 8); 





Var color = Oxffffff; 

var ambient = 0x888888; 

// 添加 一 个 作为 平面 的 地 面 ,以 便 更 好 地 观察 灯光 

geometry = new THREE.PLlaneGeometry(200, 200, 50, 50); 

var mesh = new THREE.Mesh(geometry, new THREE.MeshPphongMaterial({color:color, 
ambient:ambient, map:map, side:THREE.DoubleSide})); 

mesh.rotation.x = -Math.PI / 2; 

mesh.position.y = -4.02; 


UD 


// 将 网 格 添 加 到 分 组 
group.add( mesh ); 
mesh.castShadow = false; 
mesh.receiveShadow = true; 





// 创建 立方 体 几 何 形状 
geometry = new THREE.CubeGeometry(2, 2, 2); 


UD 


// 然后 将 儿 何 形状 和 材质 整合 到 网 格 

mesh = new THREE.Mesh(geometry, new THREE.MeshPphongMaterial({color:color, 
ambient:ambient})); 

mesh.position.y = 3; 

mesh.castShadow = true; 

mesh.receiveShadow = false; 





UD 


// 将 网 格 添加 到 分 组 
group.add( mesh ); 











// 将 网 格 持 久 化 到 变量 中 以 便 对 其 进行 旋转 操作 


cube = mesh; 





// 创建 球体 几何 形状 
geometry = new THREE.SphereGeometry(Math.sqrt(2), 50, 50); 


UD 


// 然后 将 几何 形状 和 材质 整合 到 网 格 
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mesh = new THREE.Mesh(geometry, new THREE.MeshPphongMaterial({color:color, 
ambient:ambient})); 

mesh.position.y = 0; 

mesh.castShadow = true; 

mesh.receiveShadow = false; 


// 将 网 格 添加 到 分 组 中 
group.add( mesh ); 





// 创建 圆锥 几何 形状 
geometry = new THREE.CylinderGeometry(1, 2, 2, 50, 10); 





// 然后 将 几何 形状 和 材质 整合 到 网 格 中 

mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMateriaL({fcoLor:coLor， 
ambient:ambient})); 

mesh.position.y = -3; 





mesh.castShadow = true; 
mesh.receiveShadow = false; 


// 将 网 格 添 加 到 分 组 中 
group.add( mesh ); 


// 现在 将 分 组 添加 到 场景 中 


scene.add( root ); 








} 


首先 ， 我 们 通过 设置 renderer.shadowMapEnabled 为 true 并 将 其 shadowMapType 属性 设 
置 为 THREE.PCFSoftShadowMap 来 开启 阴影 。Three.js 支持 三 种 类 型 的 阴影 贴图 算法 : 基础 
(basic)、PCF ( percentage close filtering) 和 PCF soft shadows。 每 种 算法 都 比 前 一 种 更 接 
近 真 实效 果 ， 但 会 导致 复杂 度 的 上 升 和 性 能 的 下 降 。 尝 试 在 这 个 示例 中 将 shadowMapType 
的 值 改 为 THREE.BasicShadowMap 和 THREE.PCFShadowMap 来 查看 效果 ， 阴 影 的 质量 在 低 质 
量 的 设 定 下 会 明显 降低 。 但 如 果 你 的 场景 非常 复杂 ， 那 么 你 就 得 通过 降低 质量 的 方式 来 提 
升 性 能 。 

接 下 来 ， 我 们 需要 为 聚光灯 开启 阴影 。 我 们 将 其 castShadow 属性 设置 为 true。 同 时 我 们 
需要 设置 Three.js 所 需 的 其 他 几 个 参数 。Three.js 通过 从 灯光 位 置 引 一 条 通过 目标 物体 的 射 
线 的 方式 来 泻 染 阴影 。 从 本 质 上 说 ， 它 将 聚光灯 当成 另 一 种 类 型 的 “相机 ”来 处 理 。 所 以 
我 们 需要 设置 一 些 类 似 相机 设置 的 参数 ， 包 括 近 和 远 裁 剪 平 面 以 及 视野 。 近 和 远 裁 前 平面 
的 值 取决 于 场景 和 物体 的 尺寸 ， 所 以 我 们 为 它们 都 设置 了 一 个 比较 小 的 值 。 视 野 根据 经 验 
来 设置 。 我 们 还 要 为 阴影 设置 一 个 上 暗 度 值 ，Three.js 默认 的 0.5 对 这 个 应 用 来 说 很 合适 。 随 
后 ， 我 们 需要 设置 Three.js 阴影 贴图 尺寸 的 大 小 属性 。 阴 影 贴图 是 一 个 额外 的 位 图 ， 专 门 
用 于 泻 染 阴影 的 瞳 区 域 并 最 终 和 每 个 物体 最 终 的 泻 染 图 像 混 合 。 我 们 将 SHADOW_MAP_WIDTH 
和 SHADOW_MAP_HEIGHT 的 值 设 为 2048， 比 Three.js 默认 的 512 要 高 。 这 将 提供 非常 平 请 的 
阴影 ， 这 个 值 越 小 ， 产 生 的 阴影 就 会 呈现 越 多 的 锯齿。 尝试 修改 示例 中 的 这 个 值 来 查看 低 
分 辩 率 的 阴影 贴图 是 如 何 影响 阴影 质量 的 。 


最 后 ， 我 们 需要 告诉 Three.js 哪些 对 象 产生 和 接收 阴影 。Three.js 的 网 格 默 认 既 不 产生 也 
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不 接收 阴影 ， 我 们 需要 明确 设置 。 在 这 个 示例 中 ， 我 们 希望 将 三 个 几何 体 的 阴影 投 到 地 
板 上 ， 然 后 地 板 接收 这 些 阴 影 ， 所 以 ， 我 们 将 地 板 的 mesh.castShadow 属性 设置 为 false， 
mesh.receiveShadow 属性 设置 为 true; 将 立方 体 、 球 体 、 圆 锥 的 mesh.castShadow 属性 设 
置 为 true，mesh.receiveShadow 属性 设置 为 false。 


最 后 的 最 后 ， 我 们 希望 阴影 的 强度 随 着 聚光灯 的 光线 强度 变化 而 变化 。 然 而 ，Three. 
js 的 阴影 贴图 在 泻 染 的 时 候 并 不 会 自动 随 光 线 强 度 变 化 而 调整 。 实 际 上 ， 它 依赖 于 灯光 
的 shadowDarkness 属性 。 因 此 当 灯 光 的 颜色 被 用 户 改变 的 时 候 ， 我 们 需要 手动 去 更 新 
shadowDarkness 的 值 。 接 下 来 的 这 段 代 码 展 示 了 setShadowDarkness() 国 数 的 实现 ， 它 基于 
光源 RGB 值 的 平均 值 来 计算 阴影 的 暗 度 。 当 你 将 聚光灯 的 颜色 调 瞳 时 ， 会 发 现 阴 影 也 随 
着 变 谈 了 。 


























function setShadowDarkness(light, r, g, b) 


{ 
r /= 255; 
g /= 255; 
b /= 255; 
var avg = (r +g+b) /3; 
light.shadowDarkness = avg * 0.5; 
} 


实时 阴影 是 WebGL 可 视 化 体验 中 的 一 项 神奇 的 增强 技术 ， 而 Three.js 可 以 
帮助 我 们 更 方便 地 实现 它 。 然 而 ， 它 是 有 代价 的 。 首 先 ， 阴 影 贴图 是 另 一 种 
类 型 的 纹理 贴图 ， 它 需要 更 多 的 显存 。 对 于 一 个 2048 x 2048 的 阴影 贴图 ， 
我 们 需要 额外 的 4 MB 显存 空间 。 试 试看 你 是 否 能 够 用 更 小 尺寸 的 阴影 贴图 
来 达到 你 想 要 的 效果 。 而 且 ， 在 某 些 图 形 设备 上 ， 离 屏 演 染 阴影 贴图 可 能 会 
引入 更 多 处 理 开销 ， 从 而 显著 降低 帧 率 。 因 此 你 应 当 谨慎 地 使 用 这 个 特性 。 
请 务必 做 好 足够 的 性 能 分 析 ， 并 在 需要 的 情况 下 降级 到 一 个 无 需 实时 阴影 的 
方案 。 


























4.6 ”着色 器 


Threejs 内 置 了 一 套 强大 的 材质 集合 。 它 们 都 是 基于 库 中 预 置 的 GLSL 着 色 器 来 实现 的 。 
这 些 着 色 器 可 以 用 来 支持 常见 的 着 色 需 求 ， 如 unlit、Phong 和 Lambert。 但 或 许 还 存在 很 
多 别 的 需求 。 总 的 来 说 ， 材 质 应 当 可 以 实现 无 限 多 种 类 的 效果 ， 可 以 使 用 多 种 多 样 的 属 
性 ， 可 以 支持 任意 复杂 的 实现 。 举 例 来 说 ， 一 个 用 于 模拟 风吹草动 的 着 色 器 ， 可 能 需要 支 
持 调整 草 的 高 度 和 密度 ， 以 及 调整 风速 和 风向 的 属性 。 


随 着 计算 机 图 形 的 发 展 ， 以 及 过 去 二 十 年 相关 领域 产能 价值 的 提升 (从 开始 的 为 电影 制作 
后 期 效果 ， 到 后 来 的 运用 于 实时 视频 游戏 )， 着 色 技 术 不 再 是 艺术 产品 的 尝试 ， 而 是 成 为 
了 一 个 通用 的 程序 问题 。 业 界 联合 起 来 创建 了 一 项 可 编程 的 管道 技术 ， 称 为 可 编程 着 色 器 
(programmable shader) ， 而 不 是 尝试 预测 每 种 可 能 的 材质 属性 组 合 ， 并 包含 在 运行 时 引擎 
的 代码 中 。 着 色 器 允许 开发 者 使 用 类 C 语言 编写 实现 顶点 级 和 像素 级 的 复杂 效果 ， 并 编译 
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成 可 以 在 GPU 中 运行 的 代码 。 使 用 可 编程 着 色 器 ， 开 发 者 可 以 创建 出 高 性 能 、 高 度 有 逼真 
的 视觉 效果 ， 从 预 置 的 材质 和 灯光 模型 的 限制 中 解放 出 来 。 


4.6.1 ShaderMaterial 类 : 编写 你 自己 的 着 色 器 代码 


GL 着 色 语 言 (GLSL) 是 为 Open GL 和 OpenGL ES 开发 的 一 种 着 色 器 语言 (WebGL API 
的 基础 )。GLSL 源 代码 通过 WebGL 上 下 文 对 象 提供 的 方法 来 编译 并 在 WebGL 中 执行 ， 
Three.js 隐藏 了 GLSL 的 底层 细节 ， 人 允许 我 们 选择 无 需 编 写 着 色 器 的 模式 进行 开发 。 对 于 
多 数 的 应 用 来 说 ， 预 置 的 材质 类 型 已 经 足够 。 但 如 果 我 们 的 应 用 需要 一 些 预 置 类 型 中 没有 
提供 的 效果 ，Three.js 也 允许 我 们 使 用 THREE.ShaderMaterial 来 进行 定制 化 的 着 色 器 来 发 。 

图 4-14 展示 了 ShaderMaterial 应 用 的 一 个 示例 。 这 个 示例 可 以 在 Three.js 工程 目录 下 的 


examples/webgl_materials_shaders_fres nel.html 文件 中 找到 ， 它 演示 了 一 个 Fresnel 着 色 器 。 
Fresnel 着 色 器 用 于 模拟 光线 穿 过 水 和 玻璃 等 透明 介质 时 产生 的 反射 和 折射 效果 。 




















图 4-14， Fresnel 着 色 器 提供 了 高 度 逼 真 的 反射 和 折射 效果 


Fresnel 着 色 器 ( 读 作 “fre-nel”) 以 Fresnel Effect ( 菲 涅 尔 效 应 ) 命名 。 这 
个 效应 的 最 早 记录 出 自 法 国 物理 学 家 奥古斯丁 ' 简 . 菲 涅 尔 (Augustin-Jean 
Fresnel，1788 一 1827)。 非 涅 尔 通过 研究 光 在 不 同 介质 中 的 传播 ， 提 出 了 波 
动 理 论 。 和 希望 获取 更 多 的 信息 ， 请 访问 online 3D rendering glossary (http:// 
www.3drender.com/ glossary/fresneleffect.htm) 

















示例 中 的 设置 代码 按 以 下 流程 创建 了 一 个 ShaderMaterial 对 象 ， 首 先 它 复 制 了 
FresneLShader 模板 对 象 中 的 uniform (参数 ) 值 一 一 每 个 着 色 器 实例 都 需要 它 自 身 的 数据 





副本 一 一 并 将 GLSL 源码 作为 参数 传 给 顶点 和 片段 着 色 器 。 在 初始 化 完成 之 后 ，Threejs 
会 自动 处 理 着 色 器 的 编译 和 链接 ， 并 将 JavaScript 属性 绑 定 到 uniform 的 相应 值 上 。 


var shader = THREE.FresneLShader ; 
var uniforms = THREE.UniformsUtils.clone(shader .uniforms ); 














uniforms[ "tCube" ].vaLue = textureCube; 


var parameters = { 
fragmentShader: shader.fragmentShader, 
vertexShader: shader .vertexShader, 
uniforms: uniforms }; 


var material = new THREE.ShaderMaterial( parameters ); 


Fresnel 着 色 器 的 GLSL 源 代码 如 例 4-4 所 示 。 这 段 源 代码 可 以 在 Three.js 工程 目录 下 的 
examples/js/shaders/FresnelShader.js 文件 中 找到 。 这 个 着 色 器 代码 由 Three.js 的 活跃 贡献 者 
Branislav Ulicny (更 为 人 所 知 的 是 他 的 昵称 AlteredQualia) 提供 。 让 我 们 通读 这 段 代 码 ， 
来 看 看 这 个 着 色 器 是 如 何 实现 的 。 

例 4-4: 为 Three.js 编写 的 Fresnel 着 色 器 

/** 


* Qauthor alteredq / http://alteredqualia.com/ 
* Based on Nvidia Cg tutorial 


| 














THREE.FresneLShader = { 
uniforms: { 


"mRefractionRatio": { type: "f", value: 1.02 }, 
"mFresnelBias": { type: "f", value: 0.1 }, 
"mFresnelPower": { type: "f", value: 2.0 }, 
"mFresnelScale": { type: "f", value: 1.0 }, 
"tCube": { type: "t", value: null } 


}， 


THREE. ShaderMaterial 中 的 uniforms 属性 指定 了 Three,js 在 着 色 器 被 使 用 时 会 传 给 WebGL 
的 值 。 回 忆 一 下 ， 着 色 器 代码 会 对 每 个 顶点 和 像素 (片段 ) 都 执行 一 次 。 正 如 字面 上 的 意 
思 那 样 ， 着 色 器 中 的 uniform 属性 的 值 不 会 随 着 顶点 的 切换 而 改变 ， 它 们 本 质 上 是 作用 于 
全 部 顶点 和 像素 的 恒定 全 局 变量 。 这 个 示例 中 的 Fresnel 着 色 器 定义 了 用 于 控制 反射 率 和 
折射 率 的 uniform 属性 (例如 mRefractionRatio 和 mFresneLScate)。 它 还 为 立方 体 纹理 定 
义 了 一 个 uniform 属性 ， 作 为 整个 场景 的 背景 。 类 似 于 我 们 前 面 学习 过 的 立方 体 环境 映射 ， 
这 个 着 色 器 也 使 用 了 将 立方 体 映射 像素 泻 染 到 表面 来 模拟 反射 的 方式 。 然 而 使 用 这 个 着 色 
器 ， 我 们 不 仅仅 可 以 看 到 从 立方 体 映射 反射 的 像素 ， 还 可 以 观察 到 折射 现象 。 


4.6.2 ”在 Three.js 中 使 用 GLSL 着 色 器 代码 
现在 该 来 设置 顶点 和 片段 着 色 器 了 ， 首 先是 顶点 着 色 器 : 
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vertexShader: [ 


"uniform float mRefractionRatio;", 
"uniform float mFresnelBias;", 
"uniform float mFresnelScale;", 
"uniform float mFresnelPower;", 


"varying vec3 vReflect;", 
"varying vec3 vRefract[3];", 
"varying float vReflectionFactor;", 


"void main() {", 


"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );", 
"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );", 


"vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, "， 
modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );", 


"vec3 I = worldPosition.xyz - cameraPosition;", 


"vReflect = reflect( I, worldNormal );", 

"vRefract[0] = refract( normalize( I ), worldNormal, "， 
机 mRefractionRatio );", 

"vRefract[1] = refract( normalize( I ), worldNormal, "， 
" mRefractionRatio * 0.99 );", 

"vRefract[2] = refract( normalize( I ), worldNormal, "， 
四 mRefractionRatio * 0.98 );", 

"vReflectionFactor = mFresnelBias + mFresnelScale * "， 
出 pow( 1.0 + dot( normalize( I ), worldNormal ), "， 
mFresnelPower );", 


"gl_Position = projectionMatrix * mvPposition;", 


oe 
].join("\n"), 


顶点 着 色 器 代码 是 这 个 材质 的 主力 。 它 使 用 相机 位 置 以 及 模型 (在 这 个 示例 中 指 的 是 用 作 
表示 气泡 形状 的 球体 ) 中 每 一 个 顶点 的 位 置信 息 来 计算 出 一 个 方向 向 量 ， 用 于 计算 每 个 顶 

点 的 反射 和 折射 系数 。 dae 中 的 varying 声明 。 与 uniform 类 型 的 变 
量 不 同 ，varying 类 型 的 变 每 个 节点 中 都 会 被 计算 ,然后 从 顶点 着 色 器 传递 到 片段 着 色 
器 。 通 过 这 种 方式 ， 和 可 以 输出 数值 到 内 置 的 gl_Position 变量 中 ， 而 这 是 它 主 
要 的 工作 。 对 Fresnel 着 色 器 来 说 ，varying 输出 的 是 反射 和 折射 系数 。 


Fresnel 顶点 着 色 器 还 使 用 了 许多 我 们 在 这 里 没有 看 见 的 varying 和 uniform 变量 : 


modelMatrix、modelViewMatrix、projectionMatrix 和 cameraPosition。 这 些 变 量 是 由 


Three.js 预先 定义 的 ， 并 自动 传递 到 GLSL 编译 器 。 这 些 值 不 需要 ， 发 者 说 不 应 该 由 着 色 
器 的 编写 者 显 式 声明 。 
。 modelMatrix (uniform ) 
模型 (网 格 ) 的 世界 变换 和 矩阵。 正如 在 4.2 市 中 所 讨论 的 那样 ， 这 个 矩阵 在 每 一 帧 都 会 
被 Three.js 计算 出 来 ， 用 于 表示 物体 在 世界 空间 中 的 位 置信 息 。 在 这 个 着 色 器 中 ， 它 被 
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用 来 计算 每 个 顶点 在 世界 空间 中 的 位 置 。 


。 modelViewMatrix (uniform) 





用 于 表示 每 个 物体 在 相机 空间 中 的 位 置 变换 信息 ， 也 就 是 在 坐标 系 中 相对 于 相机 的 位 置 
和 方向 ， 这 对 于 计算 和 相机 相关 的 值 (例如 在 这 个 着 色 器 中 用 于 确定 反射 和 折射 的 值 ) 





特别 方便 。 
。 projectionMatrix (uniform) 
用 于 计算 我 们 熟悉 的 从 相机 空间 到 屏幕 空间 的 3D 到 2D 的 映射 。 
。 camerapPosition (uniform) 
由 Three.js 维护 ， 表 示 相 机 在 世界 空间 中 的 位 置 ， 自 动 传 入 。 
。 position (varying) 
模型 空间 中 的 顶点 位 置 。 
。 normal (varying) 
模型 空间 中 的 法 向 量 信息 。 


这 个 顶点 着 色 器 还 使 用 了 内 置 的 GLSL 函数 reflect() 和 refract()， 用 来 基于 相机 方向 、 
法 向 量 和 折射 率 来 计算 反射 和 折射 向 量 信 息 。( 由 于 这 些 函数 在 进行 如 Fresnel 方程 这 类 光 





线 计算 时 非常 有 用 ， 所 以 被 作为 GLSL 语言 的 内 置 函 数 。) 


最 后 ， 注 意 Array.join() 函数 的 使 用 ， 它 被 用 来 将 顶点 着 色 器 的 代码 字符 








拼 在 一 起 。 这 


展示 了 另 一 种 拼接 使 用 GLSL 编写 的 着 色 器 代码 的 长 字符 串 的 有 用 方法 。 我 们 使 用 join() 
函数 来 在 代码 中 插入 新 行 ， 而 不 是 在 每 一 行 的 结尾 处 换行 并 添加 字符 串 连 接 符 。 


从 这 里 起 ， 片 段 着 色 器 的 工作 就 非常 简单 了 。 它 使 用 顶点 着 色 器 计算 出 的 反射 率 和 折射 
率 的 值 ， 来 索引 到 通过 uniform 变量 tCube 传 入 的 立方 体 纹 理 上 的 颜色 值 。 这 个 变量 是 
samplerCube 类 型 的 ，samplerCube 类 型 是 一 种 用 于 处 理 立 方 体 纹理 的 GLSL 类 型 。 我 们 
使 用 GLSL 函数 mix() 来 混合 两 种 上 颜色， 构建 出 最 终 的 像素 信息 并 将 其 输出 存储 在 内 置 的 






































上 且 . 


gl_FragColor 变量 





fragmentShader: [ 
"uniform samplerCube tCube;", 


"varying vec3 vReflect;", 
"varying vec3 vRefract[3];", 
"varying float vReflectionFactor;", 


"void main() {", 


"vec4 reflectedColor = textureCube( tCube, " 
vec3( -vReflect.x, vReflect.yz ) );", 
"vec4 refractedColor = vec4( 1.0 );", 


"refractedColor.r = textureCube( tCube, " 
vec3( -vRefract[0].x, vRefract[0] .yz ) ).r;", 
"refractedColor.g = textureCube( tCube, " 
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vec3( -vRefract[1].x, vRefract[1].yz ) ).g;"， 
"refractedColor.b = textureCube( tCube, ",， 
vec3( -vRefract[2].x, vRefract[2] .yz ) ).b;", 


"gl_FragColor = mix( refractedColor, " 
reflectedColor, clamp( vReflectionFactor, " 
0.0, 1.0 ) );", 


3 
].join("\n") 
上 


创建 定制 化 的 着 色 器 看 起 来 需要 很 多 工作 ， 但 这 是 值得 的 ， 因 为 它 输 出 了 一 个 非常 接近 真 
实 世 界 的 光学 模拟 效果 。 而 Three.js 帮忙 完成 了 其 他 的 机 械 工作 一 一 更 新 每 个 物体 的 世界 
矩阵， 追踪 相机 ， 预 定义 许多 GLSL 变量 ， 编 译 和 链接 着 色 器 代码 为 我 们 省 下 了 大 量 
的 开发 和 调试 时 间 ， 使 得 着 色 器 的 开发 工作 变 得 方便 上 且 吸 引 人 。 有 了 这 个 框架 ， 你 可 以 轻 
公 尝 试 编写 你 自己 的 着 色 器 。 我 建议 从 Three.js 示例 中 提供 的 Fresnel 和 其 他 着 色 器 开始 。 
Three.js 提供 了 多 种 不 同类 型 的 特效 ， 通 过 这 些 示 例 可 以 学 到 非常 多 的 东西 。 


4.7 泻 染 


这 一 章 我 们 使 用 了 Threejs 中 的 很 多 方法 来 不 断 提 升 真 实 度 ， 从 简单 的 几何 形状 到 材质 、 
纹理 、 灯 光 和 阴影 ， 最 终 使 用 GLSL 编写 了 我 们 自己 的 着 色 器 。 每 一 步 ， 我 们 都 比 上 一 步 
创造 了 更 具 真 实感 的 图 形 ， 但 我 们 还 差 最 后 一 步 : 这 染 。 


Three.js 3D 场景 控制 的 最 终 输出 是 演 染 在 浏览 器 Canvas 元 素 上 的 2D 图 像 。 无 论 是 使 用 
WebGL， 还 是 2D Canvas 绘图 API， 抑 或 是 通过 更 改 CSS 来 使 得 元 素 在 页 面 上 移动 ， 都 
无 关 紧 要 ;我 们 的 最 终 目的 都 是 绘制 像素 点 。 我 们 选择 WebGL， 只 是 因为 它 具 有 高 性 能 。 
使 用 其 他 技术 ， 我 们 或 许 能 实现 同样 的 视觉 效果 ， 但 性 能 无 法 接受 。 所 以 我 们 经 常 选择 
WebGL 。 
也 就 是 说 ， 即 便 使 用 了 WebGL， 我 们 在 具体 泻 染 图 像 的 时 候 也 有 很 多 选择 。 例 如 ，API 
允许 我 们 选择 是 否 使 用 深度 缓冲 〈(Z-buffering) 演 染 (这 是 一 种 通过 在 硬件 中 使 用 额外 的 
存储 空间 来 存储 物体 的 深度 信息 ， 以 实现 只 绘制 场景 中 最 前 面 像素 的 技术 )。 这 是 可 选 的 。 
如 果 我 们 没有 启用 深度 缓冲 ， 我 们 的 应 用 则 需要 自己 处 理 物体 的 排序 ， 这 可 能 需要 深入 到 
外 片 级 别 。 这 听 起 来 很 及 烦 ， 但 在 某 些 应 用 场景 下 ， 我 们 或 许 恰 恰 需 要 这 么 做 。 这 仅仅 是 
我 们 对 于 泻 染 的 一 个 可 选项 。 


Threejs 的 设计 初 训 是 使 得 基础 的 图 形 处 理 变 得 更 加 简单 。 使 用 内 建 的 WebGL 泻 染 器 ， 开 
发 者 无 需 花费 太 多 精力 就 可 以 创建 出 游戏 级 别 的 图 形 效果 。 正 如 我 们 在 前 面 的 示例 中 所 
看 到 的 那样 ， 这 可 以 通过 以 下 简单 的 步骤 来 实现 ;创建 泻 染 器 ， 设 置 视 口 尺寸 ， 以 及 调 
用 render() 函数 。 但 Threejs 允许 我 们 做 更 多 的 事情 ， 它 提供 了 能 够 控制 WebGL 底层 演 
染 流程 的 能 力 。 通 过 将 这 些 能 力 结合 高 级 的 泻 染 技术 ， 例 如 后 处 理 、 多 道 演 染 以 及 延迟 演 
染 ， 我 们 可 以 创建 高 度 仿真 的 效果 。 
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4.7.1 后 处 理 和 多 道 泻 ; 

有 时候， 一 次 泻 染 并 不 够 。 一 个 场景 经 常 需要 通过 多 次 泻 染 来 创建 高 质量 的 、 真 实 的 图 
像 。 这 些 独 立 的 演 染 最 终 在 一 个 被 称 为 多 道 演 染 (multipass rendering) 的 流程 中 合成 到 一 
起 ， 产 生 最 终 的 图 像 。 许 多 多 道 演 染 方 法 使 用 后 处 理 (post-processing) 技术 ， 或 者 通过 图 
像 处 理 技术 来 提升 图 像 质 量 。 


后 处 理 和 多 道 演 染 在 实时 3D 泻 染 中 越 来 越 流 行 ， 因 此 Threejjs 的 作者 花 了 很 大 的 工夫 
来 支持 它 。 图 4-15 展示 了 一 个 精细 而 生动 的 示例 ， 它 使 用 Threejjs 后 处 理 编 写 ， 作 者 是 
AlteredQualia。 加 载 examples/webgl_terrain_dynamic.html 文件 。 壮 观 的 鸟 群 在 雾 震 的 晨光 
中 飞越 奇幻 的 地 表 。 单 纯 基 于 噪声 程序 生成 的 地 形 并 不 足以 令 人 印象 深刻 ， 该 场景 特别 使 
用 了 多 道 泻 染 工序 ， 包 括 使 用 bloom 着 色 法 来 强调 阳光 在 晨 雾 中 的 漫 射 效 果 ， 以 及 使 用 高 
斯 滤 镜 让 场景 产生 轻微 模糊 来 增强 场景 的 宁静 氛围 。 





























图 4-15: 动态 地 形 程序 示例 ， 使 用 多 道 后 处 理工 序 泻 染 。 程 序 由 AlteredQualia 提供 ， 鸟 儿 由 
Mirada 提供 (来 自 RO.ME fame) 


Threejjs 的 后 处 理 依赖 于 以 下 特性 。 

。 通过 THREE.WebGLRenderTarget 对 象 支持 多 重演 染 目 标 (multiple render target)。 通 过 多 
重演 染 目 标 ,场景 可 以 被 多 次 演 染 到 离 屏 位 图 上 ， 并 合成 到 最 终 的 图 像 中 。( 源 文件 : 
src/renderers/WebGLRenderTarget.js。 ) 

。 THREE.EffectComposer 类 实现 了 一 个 多 道 浑 染 循环 。 这 个 对 象 包含 一 个 或 多 个 渔 染 工序 
(render pass) 对 象 ， 它 们 会 被 依次 调用 来 进行 场景 泻 染 。 每 一 道 工序 都 拥有 访问 整个 场 
景 以 及 上 一 道 工 序 处 理 产生 的 图 像 数据 的 权限 ， 从 而 进一步 细 化 图 像 。 

THREE.EffectComposer ， 以 及 使 用 它 来 实现 多 道 泻 染 的 示例 ， 可 以 在 Three.js 工程 目录 中 的 

examples/js/postprocessing/ 和 examples/js/shaders/ 文件 夹 中 找到 。 浏 览 这 些 目录 ， 你 将 会 发 
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现 一 个 后 处 理 特效 的 宝库 。 




















4.7.2 ”延迟 泻 ; 





我 们 再 来 另 一 种 演 染 方法 : 延迟 澄 染 (deferred rendering)。 正 如 其 名 ， 这 种 方法 直到 





























通过 不 同 的 来 源 计 算出 最 终 的 图 像 结果 ， 才 把 这 个 结果 泻 染 到 WebGL canvas 上 。 








演 染 持续 演 染 一 个 场景 ， 不 断 改 进 图 











与 多 道 


像 ， 最 终 复制 到 WebGL canvas 中 不 同 ， 延 迟 演 染 在 














初始 阶段 使 用 了 多 个 缓冲 (就 是 纹理 





贴 
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) 来 收集 着 色 器 的 计算 结果 数据 ， 并 











在 接 下 来 





的 阶段 中 ， 使 用 初始 阶段 收集 的 结果 来 计算 像素 值 ， 这 种 方式 非常 耗费 存储 空间 和 计算 能 


力 ， 但 它 也 可 以 创造 高 度 真实 的 效果 ， 尤 其 是 对 于 光线 和 阴影 的 处 理 。 





























参见 图 4-16。 














图 4-16: 使 用 延迟 浑 染 的 逐 像素 光线 处 理 〈 另 见 彩 插图 4-16) 


4.8 小结 











本 章 覆 盖 的 内 容 非常 广 ， 涉 及 了 Threejs 提供 的 大 部 分 绘图 和 浑 染 能 力 。 我 们 了 解 了 如 何 
使 用 预 置 的 几何 形状 类 来 创建 3D 立方 体 、 网 格 和 参数 化 的 挤 出 图 形 。 我 们 讨论 了 Three.js 
中 用 于 组 织 复杂 场景 的 场景 图 和 空间 变换 层级 结构 。 我 们 亲手 实践 了 材质 、 纹 理 和 灯光 。 
最 后 ， 我 们 了 解 了 可 编程 着 色 器 和 高 级 的 泻 染 技术 ， 如 后 处 理 和 延迟 泻 染 是 如 何 提 升 可 视 
化 的 真实 程度 的 。Three.js 将 强大 的 图 形 处 理 特性 以 简单 易 用 的 库 的 形式 提供 出 来 。 这 些 
能 力 结合 WebGL 的 原生 能 力 ， 使 得 我 们 几乎 能 够 创建 出 我 们 能 够 想到 的 全 部 3D 可 视 化 











效果 。 
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30 动 画 








动画 意味 着 随 着 时 间 改 变 屏 幕 上 的 图 像 。 有 了 动画 以 后 ， 静 态 的 3D 场景 就 有 了 生命 。 尽 
管 有 很 多 可 用 于 动画 的 技术 以 及 从 概念 上 对 问题 建 模 的 方式 ， 最 终 ， 动 画 要 解决 的 事 只 有 
一 件 : 让 像素 移动 。 


WebGL 本 身 并 没有 对 动画 的 原生 支持 。 尽 管 如 此 ，WebGL API 的 能 力 和 速度 允许 我 们 以 
高 达 60 帧 每 秒 的 频率 浑 染 复杂 的 图 形 并 修改 它们 ， 并 人 允许 我 们 以 多 种 方式 实现 3D 动画 内 
容 。 结 合 现代 浏览 器 对 运行 时 架构 的 改进 ， 这 些 动画 可 以 与 页 面 上 的 其 他 元 素 无 颖 融合 。 


动画 可 以 用 于 改变 WebGL 场景 中 的 任意 元 素 : 变换 、 几 何 形状 、 纹 理 、 材 质 、 灯 光 和 相 
机 。 物 体 可 以 移动 、 旋 转 、 伸 缩 或 沿 轨迹 运动 ， 几何 形 状 可 以 弯曲 、 扭 曲 或 者 变 成 其 他 形 
状 ， 纹 理 可 以 移动 、 缩 放 、 旋 转 和 滚动 ， 或 者 随 着 帧 变化 修改 其 像素 点 ;材质 颜色 、 镜 国 
高 光 、 透 明度 等 都 可 以 随 着 时 间 变 化 ,灯光 可 以 闪烁、 移动 以 及 改变 自身 颜色 ， 相 机 可 以 
移动 、 旋 转 来 创建 类 似 电 影 的 效果 。 动 画 有 无 限 的 可 能 。 


在 本 章 中 ， 我 们 会 研究 多 种 动画 技术 ， 以 及 用 于 实现 它们 的 工具 和 库 。 这 些 技术 基于 电影 
和 电子 游戏 行业 多 年 的 实践 ， 并 由 严格 的 数学 论证 支持 。WebGL 中 的 动画 是 一 个 发 展 中 
的 领域 ， 所 以 我 们 的 探索 涉及 多 种 不 同方 案 的 混合 使 用 。Three.js 提供 了 能 够 很 好 地 处 理 
部 分 使 用 场景 的 动画 工具 。 我 们 也 会 研究 男 一 个 开源 库 一 一 Tween.js。Tween.js 是 一 个 小 
巧 易 用 的 、 用 于 创建 简单 过 渡 的 库 。 然 而 这 些 还 远 远 不 足 ， 如 果 你 的 应 用 十 分 复杂 ， 那 你 
可 能 需要 创建 你 自己 的 动画 引擎 。 


创建 WebGL 动画 内 容 涉 及 以 下 一 个 或 多 个 概念 ， 这 些 概念 会 在 本 章 中 进行 详细 介绍 。 


。 使 用 requestAnimationFrame() 来 驱动 运行 循环 。 
。 在 每 次 运行 循环 执行 的 时 候 ， 以 编程 方式 改变 可 视 物体 的 属性 。 这 适用 于 创建 简单 的 动 
画 ， 如 使 一 个 物体 绕 单 个 坐标 轴 旋 转 。 在 一 个 物体 的 位 置 、 方 向 或 其 他 属性 可 以 表示 为 
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关于 某 个 变量 (例如 时 间 ) 的 函数 时 ， 这 项 技术 也 非常 有 用 。 总 的 来 说 ， 这 是 最 简单 的 
动画 技术 实现 ， 但 它 仅 限于 非常 有 限 的 使 用 场景 。 

。 使 用 补 间 (tween) 来 实现 属性 从 一 个 值 到 另 一 个 值 的 平滑 变化 。 补 间 非 常 适合 用 来 实 
现 一 次 性 的 简单 效果 (例如 ， 将 一 个 物体 从 一 个 位 置 沿 直线 移动 到 另 一 个 位 置 )。 

。 使 用 关键 帧 (keyframe)， 它 的 数据 结构 表示 了 一 系列 沿 时 间 轴 排列 的 离散 值 ， 并 包含 
一 个 用 于 生成 平滑 效果 的 插值 (interpolate) 计算 引擎 。 关 键 帧 适用 于 平移 、 旋 转 、 缩 
放 以 及 材质 颜色 等 简单 的 属性 的 基础 动画 。 关 键 帧 允许 我 们 在 一 次 动画 中 创建 一 系列 的 
过 小， 而 不 是 像 补 间 那 样 只 支持 从 一 个 值 到 另 一 个 值 的 单 次 过 洲 。 

。 沿路 径 (path， 用 户 定义 的 曲线 或 线段 ) 移动 物体 ， 基 于 公式 或 预定 义 的 路 径 数 据 来 创 
建 复杂 的 有 机 运动 效 

。 使 用 变形 目标 (morph target) ,通过 整合 一 系列 相互 独立 的 形状 ,实现 对 几何 形状 的 变形 。 
这 是 一 项 高 级 的 用 于 表现 面部 表情 或 非常 简单 的 人 物 动 画 的 技术 。 

。 使 用 荣 皮 (skinning) 来 基于 运动 的 骨骼 对 几何 形状 进行 变换 。 这 是 实现 人 物 动画 和 其 
他 复杂 形状 动画 的 优先 选择 。 

。 使 用 着 色 器 (shader) 来 随 着 时 间 改 变 顶 点 位 置 和 像素 值 。 某 些 时 候 ， 一 个 所 需 的 动画 
效果 最 好 基于 顶点 级 或 像素 级 进行 计算 ， 这 些 计算 最 好 使 用 GLSL 来 实现 。 着 色 器 同时 
可 以 用 于 其 他 技术 的 高 性 能 实现 ， 特 别 是 变形 和 蒙 皮 ， 如 果 用 CPU 来 处 理 ， 会 非常 耗 
费 计算 。 

在 一 个 应 用 中 ， 通 常会 使 用 这 些 方法 中 的 一 种 以 上 ， 或 者 是 全 部 。 对 于 每 项 技术 应 该 应 用 

于 哪个 具体 的 场景 ， 并 没有 一 个 硬性 的 规定 ， 尽 管 其 中 某 些 对 于 特定 的 场景 会 更 加 合适 。 

通常 技术 的 选择 取决 于 产品 考虑 ; 例如 ， 如 果 你 的 团队 成 员 中 没有 设计 师 ， 那 么 由 一 个 程 

序 员 来 使 用 代码 生成 动画 也 许 会 更 容易 。 其 他 时 候 ， 它 取决 于 个 人 偏好 。3D 动画 是 艺术 

和 科学 的 组 合 ， 也 是 生产 与 工程 的 结合 。 


5.1 使 用 requestAnimationFrame() 来 驱动 动画 


在 前 面 的 章节 中 我 们 已 经 了 解 到 如 何 使 用 requestAnimationFrame() 来 支持 应 用 的 运行 循 
环 ， 这 是 一 个 Web 浏览 器 所 支持 的 比较 新 的 API。 

requestAnimationFrame() 的 设计 目的 是 ， 让 通过 JavaScript 代码 驱动 的 Web 应 用 能 够 有 
一 致 、 可 靠 的 视觉 效果 。 包 括 DOM 元 素 变化 、 布 局 调整 、 使 用 CSS 的 样式 修改 ， 或 基 
于 Canvas 和 WebGL 这 样 的 绘图 API 创建 的 图 形 。requestAnimationFrame() 最 早出 现在 
Firefox 4 中 ， 并 最 终 被 全 部 浏览 器 所 接受 。Mozilla 的 Robert O'Callahan 原先 是 为 了 寻找 
种 保证 浏览 器 内 建 效果 (如 SVG 或 CSS 过 渡 ) 与 用 户 的 JavaScript 代码 同步 的 方法 。 


从 前 ，Web 应 用 使 用 定时 器 (timer) 来 控制 页 面 内 容 的 动画 ， 通 过 setTimeout() 或 

setInterval() 这 两 个 函数 。 随 着 Web 应 用 开始 包含 更 复杂 的 动画 和 交互 ， 这 种 方法 明显 

遭遇 了 以 下 一 些 关 键 问 题 。 

。 定时 器 以 设置 好 的 恒定 (或 尽 可 能 接近 ) 间隔 来 调用 回调 函数 ， 无 论 是 否 是 绘制 图 形 的 
最 佳 时 机 。 

。 在 定时 器 回调 中 执行 的 JavaScript 代码 无 法 与 其 他 浏览 器 计算 产生 的 动画 时 间 轴 同步 (如 
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SVG 或 CSS 过 渡 )。 
。 无 论 页 面 或 标签 页 是 否 可 见 ， 或 浏览 器 窗口 是 否 被 最 小 化 ， 定 时 器 都 会 被 重复 执行 ， 这 
会 造成 潜在 的 绘图 资源 浪费 。 
。 JavaScript 应 用 代码 不 知道 显示 器 的 刷新 率 ， 所 以 它 只 能 主观 地 设 定 计 时 器 间 值 。 例 如 
将 其 设置 为 124 秒 ， 那 么 使 用 60 Hz 刷新 率 显示 器 的 用 户 将 无 法 感受 到 流畅 的 视觉 效 
果 ， 如 果 你 将 这 个 值 设置 为 /60 秒 ， 那 么 在 刷新 率 较 低 的 显示 器 上 ， 你 就 耗费 了 额外 
的 CPU 资源 来 绘制 永远 不 会 被 显示 的 内 容 。 
requestAnimationFrame() 被 设计 来 解决 以 上 所 有 问题 。 回 忆 一 下 前 儿童 的 例子 ， 我 们 的 运 
行 循 环 类 似 于 以 下 这 种 形式 .: 


function run() { 




































































// 请 求 下 一 帧 动画 


requestAnimationFrame(run); 


// 启动 动画 

animate(); 

// 演 染 场景 

renderer.render( scene, camera ); 
注意 ， 调 用 requestAnimationFrame() 时 没有 传人 时 间 值 。 我 们 疫 有 指定 浏览 器 在 某 个 具体 
时 间或 间隔 时 调用 我 们 的 动画 和 绘制 代码 ， 我 们 只 告诉 它 在 页 面 再 次 呈现 的 时 候 调 用 。 这 
是 和 计时 器 的 关键 区 别 。 使 用 了 这 种 方式 ， 浏 览 器 就 能 在 它 内 部 重 绘 周期 的 时 候 调 用 用 户 
代码 。 这 有 几 个 好 处 。 第 一 ， 六 览 器 可 以 按照 所 需 进行 频繁 或 不 频繁 的 调用 。 当 浏览 器 还 
有 足够 的 空闲 时 间 时 ， 它 可 以 试 着 提高 帧 率 来 赶 上 显示 器 的 刷新 率 。 相 反 ， 如 果 页 面 或 标 
签 隐藏 了 ， 或 整个 浏览 器 最 小 化 了 ， 它 可 以 减少 回调 函数 的 执行 次 数 ， 优 化 电脑 或 设备 的 
资源 使 用 。 第 二 ， 浏 览 器 可 以 批量 处 理 用 户 绘图 操作 ， 从 而 减少 绘制 屏幕 的 次 数 ， 节 省 资 
源 。 第 三 ， 在 requestAnimationFrame() 中 执行 的 所 有 绘制 代码 最 终 会 与 其 他 绘图 操作 〈 包 
括 浏 览 器 内 部 的 ) 进行 合成 (composite)。 最 终 产生 更 平滑 、 更 快速 、 更 高 效 的 页 面 绘 制 
及 动画 。 


5.1.1 在 你 的 应 用 中 使 用 requestAnimationFrame() 


正如 最 近 许 多 基于 HTMLS5 特性 的 开发 一 样 ，requestAnimationFrame() 不 一 定 会 被 市 面 
上 爹 部 浏览 器 的 所 有 版 本 支持 ， 尽 管 支 持 它 的 浏览 器 已 经 越 来 越 多 。 同 时 ， 在 它 从 一 个 
浏览 器 的 实验 性 功能 真正 发 展 到 W3C 建议 的 稳定 版 本 的 过 程 中 ， 各 浏览 器 早期 实现 的 都 
是 这 个 函数 的 带 私 有 前 级 版 本 。 季 好 我 们 可 以 使 用 一 个 由 Google 工程 师 Paul Irish 创建 
的 polyfll。 代 码 如 例 5-1 所 示 ， 你 也 可 以 在 本 书 的 示例 文件 libs/requestAnimationFrame/ 
RequestAnimationFrame.js 中 找到 这 段 代码 。 它 会 尝试 在 所 有 浏览 器 版 本 中 寻找 这 个 函数 的 
正确 名 称 实现 ， 如 果 找 不 到 ， 则 自动 降级 到 每 秒 60 帧 的 setTimeout() 方案 。 

例 5-1: RequestAnimationFrame polyfll， 由 Paul Irish 提供 


* 以 跨 浏 览 器 方式 提供 requestAnimationFrame 
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* http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 
a 
if ( !window.requestAnimationFrame ) { 


window.requestAnimationFrame = ( function() { 


return window.webkitRequestAnimationFrame || 

window.mozRequestAnimationFrame || 

window.oRequestAnimationFrame || 

window.msRequestAnimationFrame || 

function( /* function FrameRequestCallback */ callback, 
/* DOMELement Element */ element ) { 


window.setTimeout( callback, 1000 / 60 ); 
}; 


} )0O; 


有 些 读者 或 许 不 太 了 解 polyfill 这 个 单词 ， 它 是 指 用 代码 (通常 是 JavaScript) 
来 实现 浏览 器 中 没有 提供 的 功能 。polyfil 通常 用 在 不 支持 新 功能 或 实验 性 
功能 的 老 版 本 浏览 器 中 。 这 个 单词 由 英国 工程 师 Remy Sharp 提出 。 如 果 
想 了 解 更 多 关于 这 个 单词 的 背景 及 来 源 ， 请 浏览 Sharp 的 博客 文章 (http:// 
remysharp.com/2010/10/08/what-is-a-polyfill/) 。 












































requestAnimationFrame() 成 功 运用 的 一 个 关键 是 确认 你 在 执行 其 他 用 户 代 码 之 前 就 请 求 了 
下 一 帧 ， 正 如 早先 我 们 在 展示 过 的 运行 循环 代码 片段 中 所 做 的 那样 。 这 对 异常 处 理 非常 重 
要 。 如 果 你 在 动画 回调 函数 中 驱动 你 的 整个 3D 应 用 ， 而 代码 在 请 求 下 一 帧 之 前 产生 了 
个 异 第 ， 你 的 整个 应 用 就 会 挂 掉 。 然 而 如 果 你 在 做 其 他 事情 之 前 先 请 求 了 下 一 帧 ， 那 么 至 
少 还 可 以 保证 程序 的 持续 运行 。 即 使 其 他 部 分 产生 了 错误 ， 应 用 的 一 部 分 也 还 能 够 工作 并 
重 绘 元 素 。 


















































5.1.2 requestAnimationFrame() 和 性 能 
尽管 requestAnimationFrame() 对 动画 性 能 有 利 ， 但 也 需要 小 心 使 用 。 如 果 浏 览 器 每 秒 60 


次 调用 你 的 回调 ， 你 需要 保证 这 个 回调 只 需 花 费 16 毫秒 或 更 少 的 时 间 ， 否 则 用 户 会 觉得 
你 的 应 用 失去 了 响应 。 因 为 16 赣 秒 很 得， 所 以 你 必须 尽 可 能 减少 操作 ， 只 做 必需 的 绘图 


修改 。 优 秀 的 3D 应 用 或 许 需 要 芬 虑 结合 使 用 定时 器 、worker 以 及 CSS 变换 与 过 渡 等 动画 
技术 ， 来 实现 尽 可 能 灵敏 、 强 大 及 低 资 源 占用 的 效果 。 


requestAnimationFrame() 可 以 说 是 HTML5 引进 的 一 个 最 重要 的 特性 。 关 于 
这 个 话题 ， 本 节 只 做 了 非常 粗略 的 探讨 。 有 很 多 优秀 的 在 线 资源 可 供 我 们 更 
好 地 了 解 它 。 在 网 络 上 使 用 这 个 国 数 名 来 搜索 ， 你 会 找到 大 量 相关 的 文章 、 
背景 资料 、 引 导 文 章 、 提 示 和 诀 窑 ， 以 及 对 其 底层 实现 的 解释 。 

















5.1.3 Se i a 


早期 计算 机 动画 系统 效仿 了 之 前 电影 中 的 技术 ， 连 续 在 屏幕 上 展现 静态 图 像 (如 果 是 
在 基于 矢量 的 图 形 中 ， ee te es 
(frame)。 历 史上 ， 电 影 是 以 每 秒 24 张 图 片 的 速度 拍摄 和 放映 的 ， 所 以 帧 率 (frame rate) 
为 每 秒 24 帧 。 这 个 速度 在 低 亮度 下 的 电影 屏幕 中 足够 了 。 但 是 ， 在 计算 机 生成 动画 及 3D 
游戏 的 世界 ， 我 们 能 够 察觉 和 体会 到 更 高 分 辩 率 的 存在 ， 高 到 30 帧 每 秒 、60 帧 每 秒 或 更 
高 。 尽 管 如 此 ， 许 多 动画 系统 ， 例 如 Adobe Flash， 最 开始 采用 了 24 帧 每 秒 的 速度 ， 
为 传统 的 动画 开发 者 已 经 习惯 了 。 目 前 ， 这 个 帧 率 变化 了 ，Flash 可 以 最 高 支持 60 帧 每 
秒 ， 但 离散 帧 的 概念 依然 在 。 这 种 将 动画 组 织 为 一 系列 离散 帧 的 做 法 被 称 为 基于 帧 的 动画 


(frame-based animation ) 。 


基于 帧 的 动画 有 一 个 严重 的 缺点 : 因为 国定 了 有 具体 的 帧 率 ， 所 以 动画 师 可 以 确保 动画 不 会 
比 预 先 设置 的 帧 率 高 ， 即 便 电脑 可 以 支持 更 高 的 帧 率 。 这 对 电 有 最 乡 来 说 没有 问题 ， 因 为 相关 
硬件 在 整个 业界 都 是 一 致 的 。 然 而 ， 在 计算 机 动画 中 ， 性 能 会 因为 设备 的 变化 有 很 大 差 
别 。 如 果 你 创建 的 是 24 帧 每 秒 的 动画 ， 但 你 电脑 屏幕 的 刷新 率 为 60 Hz， 你 就 失去 了 原本 
可 以 看 到 的 更 多 细 凶 ， 以 及 更 流畅 的 播放 体验 。 


另 一 种 被 称 为 基于 时 间 的 动画 (time-based animation) 的 技术 解决 了 这 个 问题 。 在 基于 时 
间 的 动画 中 ， 一 系列 矢量 图 形 连 接 到 特定 的 时 间 点 上 ， 而 不 是 在 已 知 帧 率 下 的 某 些 具体 
帧 。 因 此 ， 计 算 机 可 以 显示 这 些 图 片 ， 并 在 其 中 加 入 插值 ， 尽 可 能 高 频 地 显示 最 好 的 图 片 
效果 及 最 平滑 的 过 渡 。 在 之 前 章节 的 例子 中 ， 我 们 使 用 了 基于 时 间 的 动画 ， 在 每 次 运行 循 
环 中 ，animate() 国 数 计算 了 当前 帧 和 前 一 帧 之 间 的 时 间 差 ， 并 使 用 它 去 计算 旋转 角度 。 
本 章 及 接 下 来 几 章 的 所 有 例子 都 使 用 基于 时 间 的 动画 。 所 以 尽管 帧 (frame) 这 个 单词 在 
requestAnimationFrame() 名 称 的 最 后 ， 但 它 同 样 适 用 于 基于 时 间 的 动画 。 


5.2 ”使 用 程序 更 新 属性 的 方式 来 构建 动画 


到 目前 为 止 ， 在 WebGL 场景 中 启动 一 个 动画 的 最 简单 方式 是 编写 代码 ， 在 运行 循环 每 次 
执行 的 时 候 更 新 某 个 物体 的 属性 值 。 我 们 在 前 面 的 章节 中 已 经 看 过 相应 的 示例 。 我 们 通过 
更 改 立 方 体 的 rotation.y 属性 来 旋转 第 3 章 中 的 Three.js 立方 体 。 也 就 是 说 ， 在 每 一 帧 中 
我 们 动态 地 修改 了 物体 绕 y 轴 的 旋转 角度 。 让 我 们 重 温 一 下 这 段 代 码 ; 

var duration = 5000; // ms 


var currentTime = Date.now(); 
function animate() { 

























































































































































































var now = Date.now(); 

var deltat = now - currentTime; 
currentTime = now; 

var fract = deltat / duration; 
var angle = Math.PI * 2 * fract; 
cube.rotation.y += angle; 


} 
变量 duration、currentTime、now 和 deltat 用 于 计算 基于 时 间 的 旋转 动画 相关 值 。 在 这 
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个 示例 中 ， 我 们 期 望 立方 体 以 五 秒 钟 旋转 一 周 的 速率 绕 y 轴 旋 转 。 每 次 计算 出 来 的 角度 值 
(angle 变量 ) 是 整个 旋转 过 程 的 一 个 分 量 ， 这 个 量 会 被 累加 到 立方 体 当前 的 rotation.y 属 
性 上 。 回 想 一 下 ， 旋 转 在 Three.js 中 是 以 弧度 ， 即 单位 贺 上 的 距离 的 形式 来 表示 的 ， 也 就 
是 说 ，Math.PI * 2 等 于 旋转 一 周 (360 度 )。 


这 个 概念 可 以 延伸 到 给 场景 中 的 任意 东西 添加 动画 : 位置、 旋转、 缩放、 材质 颜色 、 透 明 
度 ， 等 等 。 除 此 之 外 ， 它 实际 上 是 完全 通用 的 : 通过 使 用 JavaScript 代码 来 更 新 属性 ， 我 
们 可 以 进行 任意 的 计算 更 新 。 数 学 公式 、 布 尔 逻 辑 、 统 计 值 、 数 据 流 、 实 时 传感器 输入 等 
都 可 以 用 来 驱动 动画 。 因 此 这 对 科学 绘图 和 数据 可 视 化 领域 来 说 是 一 项 非常 有 用 的 技术 : 
它 可 以 用 于 描绘 太阳 系 、 物 理 过 程 和 自然 现象 ， 也 可 以 用 来 展现 时 序 信息 、 统 计 分 析 、 地 
理 数 据 、 网 站 流量 以 及 其 他 动态 的 数据 驱动 的 信息 。 它 在 音乐 可 视 化 这 类 活 淡 的 娱乐 性 应 
用 的 创建 中 也 有 出 色 表 现 。 

图 5-1 描绘 了 Ellie Goulding’”s Lights 的 广阔 世界 ， 这 是 一 个 由 英国 的 交互 设计 代理 公司 
Hello Enjoy 开发 的 WebGL 音乐 可 视 化 项 目 。 这 个 项 目 已 经 发 布 了 相当 一 段 时 间 ， 但 它 依 
然 可 以 算 作 一 个 非常 有 冲击 力 的 作品 。 灯 光 交 蔡明 灭 ， 替 星 尾 灯 在 场景 中 描绘 着 曲线 ， 彩 
色 的 圆 球 随 颜 色 变 换 忽 隐 和 忽 现 ， 探 照 灯 疯狂 地 旋转 ， 水 滴 形 的 气球 从 五 彩 起 伏 的 地 面 上 绽 
放 一 一 所 有 这 些 都 紧 随 着 音乐 的 节拍 。 这 是 养眼 的 视觉 盛宴 ， 并 且 所 有 的 效果 都 是 由 程序 
计算 出 来 的 。 






































图 5-1:Ellie Goulding’s Lights 一 一 一 个 用 程序 动画 创建 的 音乐 可 视 化 项 目 ;图 片 由 Hello Enjoy 提供 ( 另 
见 彩 插图 5-1) 


例 5-2 展示 了 这 个 可 视 化 效果 动画 的 一 部 分 代码 。 这 个 应 用 的 update() 方法 在 每 次 运行 循 
环 执行 的 时 候 都 被 调用 。 应 用 依次 对 场景 中 的 每 个 对 象 调 用 update() 方法 。 下 面 的 代码 片 
段 来 自 LIGHTS.StarManager.update() 方法 ， 这 个 方法 用 于 控制 背景 星星 的 动画 。 星 星 被 泻 
染 为 一 个 THREE.Particlesysten 对 象 中 的 粒子 群 。 用 粗 体 标 出 的 代码 行 展示 了 每 个 星星 的 
RGB 颜色 值 是 如 何 随 着 时 间 而 变化 的 ， 以 及 通过 一 个 衰减 因子 和 取 余 运算 符 〈%) 来 创造 














86 | 第 5 章 


出 闪烁 的 效果 。 


例 5-2: 节拍 动画 一 一 Ellie Goulding’s Lights 的 代码 片段 
update: function() { 


var stars = this.stars, 
deltaTime = LIGHTS.deltaTime, 
star, brightness, i, il; 


for( i = 0, il = stars.length; i < il; i++ ) { 
star = this.stars[ i ]; 
star.life += deltaTime; 
brightness = (star.life * 2) % 2; 


if( brightness > 1 ) 
brightness = 1 - (brightness - 1); 


star.color.r = 

star.color.g = 

star.color.b = (Math.sin( brightness * rad90 - rad90 ) + 1) * 4; 
J 


this.particles. dirtyColors = true; 


}， 


尽管 以 编程 方式 实现 的 动画 非常 灵活 和 强大 ， 但 它 的 局 限 性 仍然 不 容 忽 视 。 它 需要 手动 为 
每 个 效果 编写 代码 ， 因 此 如 果 要 进行 多 种 不 同类 型 物体 的 动画 ， 将 会 非常 吃力 。 同 样 ， 相 
比 其 他 数据 驱动 的 方法 ， 如 补 间 和 关键 帧 〈 稍 后 将 会 讲述 这 些 概念 ) ， 它 也 更 为 复杂 。 最 后 ， 
它 将 程序 员 而 不 是 艺术 家 摆 在 了 实现 效果 的 关键 位 置 ， 而 创作 理想 的 视觉 效果 这 项 工作 或 许 
更 适合 艺术 家 来 做 。 不 管 怎么 说 ， 编 程 实现 的 动画 依然 是 一 个 为 场景 添加 灵动 效果 的 、 快 
速 而 简单 的 优秀 方案 ， 实 现 的 效果 也 可 以 十 分 惊人 ， 正 如 Ellie Goulding's Lights 中 那样 。 


< 、 4 二 二 bE ey 
5.3 ”使 用 补 间 来 进行 动画 过 渡 
许多 动画 效果 比 起 用 程序 在 每 次 运行 循环 中 计算 更 新 ， 更 适合 用 一 个 数据 结构 来 表示 。 应 
用 提供 一 系列 值 和 时 序 ， 以 及 一 个 用 于 计算 每 帧 属性 值 的 引 警 。 这 种 数据 驱动 的 方法 称 藉 
补 间 (tweening ) 。 
补 间 指 的 是 计算 一 对 值 中 间 插 入 的 其 他 数值 的 过 程 。 有 了 补 间 ， 动 画 绘制 者 只 需 提 供 动 画 的 
起 始 值 和 结束 值 ， 用 于 动画 时 间 过 程 中 的 中 间 值 〈( 补 间 ) 由 引擎 自动 计算 生成 。 补 间 是 实现 
由 一 个 状态 切换 到 另 一 个 状态 的 一 次 性 简单 动画 的 完美 选择 ， 如 点 击 鼠 标 移 动 一 个 物体 。 


5.3.1 插值 


补 间 通过 一 项 被 称 为 桂 值 (interpolation) 的 数学 技术 来 实现 。 插 值 指 的 是 基于 一 个 标量 输 
入 【如 时 间或 分 数值 ) 来 计算 两 个 值 之 间 的 一 个 值 。 图 5-2 描绘 了 插值 。 对 于 任意 值 A 和 
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B， 以 及 一 个 0 和 1 之 间 的 分 数 u， 插 值 P 可 以 通过 公式 A + u * (B 一 A) 计算 出 来 。 对 于 
图 5-2 中 的 示例 ， 我 们 可 以 看 到 插值 P(u) = 09.4。 这 是 最 简单 的 、 被 称 为 线性 插值 (linear 
interpolation) 的 插值 方法 ， 因 为 用 来 计算 插值 结果 的 函数 图 像 可 以 描绘 为 一 条 直线 。 其 他 
更 复杂 的 插值 函数 ， 如 样 条 (一 类 曲线 ) 和 多 项 式 ， 同 样 被 广泛 用 于 动画 系统 中 。 我 们 稍 
后 将 会 了 解 基 于 样 条 的 动画 。 
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图 5-2: 线性 插值 ， 转 载 已 被 许可 ( 另 见 彩 插图 5-2) 


插值 被 用 来 计算 3D 位 置 、 旋 转 、 颜 色 、 标 量 值 (例如 透明 度 ) 等 的 补 间 。 对 于 一 个 包 
含 多 个 组 成 部 分 的 值 ， 例 如 3D 向 量 ， 线 性 插值 补 间 通 过 计算 每 一 个 分 量 的 补 间 而 得 到 。 
例如 ， 对 于 从 点 A (6，9，0) 到 点 B (1，2，3) 的 3D 癌 量 AB， 基 于 u = 90.5 的 插值 P 为 
(O05 1, .1.5)., 





5.3.2 Tween.js 库 


自行 实现 简单 的 补 间 是 非常 容易 的 事 。 尽 管 如 此 ， 当 你 需要 非 线 性 的 插值 函数 ， 或 者 其 
他 像 火 入 /淡出 (动画 加 速 进入 ,减速 退出 ) 这 类 花哨 的 效果 时 ， 问 题 就 变 得 复杂 了 。 你 
需要 一 个 现成 的 库 ， 而 非 构造 自己 的 补 间 体 系 。Tween.js 是 一 个 流行 的 开源 补 间 通 用 库 ， 
作者 是 Soledad Penad&s。 它 被 应 用 在 许多 流行 的 WebGL 工程 中 ， 包 括 RO.ME、WebGL 
Globe 以 及 Mine3D 经 典 单 人 游戏 Minesweeper 的 Web 版 。 


文件 Chapter 5/tweenjstweens.html 中 的 示例 包含 一 个 用 于 测试 Tween.js 各 项 选项 的 沙 盒 。 
5-3 是 示例 的 截图 。 沙 盒 利 用 Tween.js 为 一 个 表面 贴图 的 了 立方体 添加 各 种 变换 ， 位 置 、 
旋转 、 材 质 颜色 以 及 透明 度 。 沙 盒 界 面 提供 了 用 于 调整 补 间 时 长 和 延 时 ( 补 间 开 始 之 前 停 
顿 的 时 间 ) 的 请 块 、 用 于 启用 /禁用 各 种 补 间 的 复 选 框 ， 以 及 一 个 用 于 色 选 补 间 是 否 循环 
(持续 重复 ) 的 选项 。 此 外 还 有 一 个 用 于 控制 缓 动 函数 的 选项 ， 我 们 将 在 下 一 节 了 予以 说 明 。 
你 可 以 调整 不 同 的 选项 来 看 看 它们 是 如 何 改变 效果 的 。 
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图 5-3: 利用 Tween.js 控制 过 渡 动 画 


Tween.js 非常 易 用 。 它 的 语法 非常 简单 ， 并 且 多 亏 JavaScript 语言 本 身 的 多 态 性 ， 我 们 可 
以 利用 基本 相同 的 函数 调用 方式 对 任何 属性 进行 修改 。 它 还 使 用 了 类 似 jQuery 的 链 式 调用 
语法 ， 使 得 整个 表达 式 看 起 来 十 分 简洁 。 让 我 们 来 看 看 例 5-3， 它 展示 了 playAnimations() 
函数 代码 的 一 部 分 ， 每 当 一 个 属性 发 生变 化 时 ， 这 个 函数 就 被 调用 来 触发 一 个 补 间 。 

例 5-3: 用 于 产生 位 置 动 画 的 Tween.js 代码 


positionTween = 


new TWEEN.Tween( group.position ) 

.to({ x: 2, y: 2, ZzZ:-3 }, duration * 1000) 
.interpolation(interpolationType) 

.delay( delayTime * 1000 ) 
.easing(easingFunction) 
.repeat(repeatCount) 

.start(); 


这 个 位 置 补 间 由 一 个 方法 链 构成 。 

。 构造 器 new TWEEN.Tween。 它 需要 一 个 参数 ， 这 个 参数 表示 包含 需要 进行 补 间 的 属性 的 
对 象 。 

。 to()。 它 需要 一 个 定义 补 间 目 标 属 性 值 的 JavaScript 对 象 ， 以 及 以 毫秒 为 单位 定义 的 补 
间 时 长 。 

。 ;interpoLation()， 一 个 用 于 定义 插值 类 型 的 可 选 方法 。 它 的 默认 值 是 线性 插值 (TNEEN 
Interpolation.Linear)， 因 此 在 使 用 线性 插值 的 时 候 ， 这 个 调用 可 以 省 略 。 

。 delay(), 一 个 用 于 在 补 间 开 始 之 前 插入 延迟 的 可 选 方法 。 

。 easing(), 一 个 用 于 定义 缓 动 函数 (在 下 一 节 说 明 ) 的 可 选 方法 。 

。 repeat(), 一 个 用 于 定义 补 间 重 复 次 数 的 可 选 方法 (默认 为 0)。 
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。 start()， 开 始 补 间 。 


注意 这 些 方 法 也 可 以 分 开 调 用 。 每 个 补 间 一 一 位 置 、 旋 转 、 材 质 颜色 以 及 透明 度 一 一 都 可 
以 通过 类 似 的 方式 设置 。Tweenjs 的 强大 之 处 在 于 你 只 需 向 to() 方法 提供 产生 变化 的 属性 
值 ， 而 无 需 对 象 的 所 有 属性 值 。 例 如 一 个 仅 改变 绕 y 轴 的 旋转 值 的 旋转 补 间 ， 可 以 通过 如 
下 形式 来 构建 : 





















































rotationTween = 


new TWEEN.Tween( group.rotation ) 

.to( { y: Math.PI * 2 }, duration * 1000) 
.interpolation(interpolationType) 

.delay( delayTime * 1000 ) 
.easing(easingFunction) 
.repeat(repeatCount) 

.Start(); 


补 间 被 创建 并 启动 之 后 ， 我 们 需要 确保 Tweenjs 在 每 个 动画 帧 中 都 会 更 新 。 这 一 步 由 应 用 
本 身 负责 执行 ， 因 此 我 们 在 run() 函数 中 添加 了 下 面 这 行 代码 : 


TNEEN.update(); 


Tween.js 在 内 部 维护 了 一 个 全 部 运行 中 补 间 对 象 的 列表 ， 并 依次 调用 它们 的 update() 方 
法 。update() 计算 经 过 的 时 间 ， 并 根据 缓 动 函数 、 延 时 和 重复 选项 ， 最 终 计算 出 在 to() 
方法 中 指定 的 属性 值 的 当前 值 ， 并 将 其 赋予 相关 属性 。 这 是 一 个 美丽 、 优 雅 而 简单 的 ， 用 
于 创建 属性 变化 的 方案 。 使 用 这 个 方案 ， 我 们 无 需 再 在 每 一 帧 中 手动 更 新 属性 值 。 


5.3.3 缓 动 
由 于 物体 始终 进行 匀速 变化 ， 使 用 线性 播 值 的 基础 补 间 会 产生 一 个 僵硬 而 不 自然 的 效果 。 
自然 界 中 的 物体 运动 与 此 完全 不 同 ， 它 们 的 运动 带 有 惯性 、 动 量 、 加 速度 ， 等 等 。 有 了 
Tween.js， 我 们 就 可 以 利用 内 置 的 组 动 (easing) 应 用 于 补 间 开始 和 结束 阶段 的 非 线性 
国 数 一 一 来 创建 更 自然 的 补 间 。 缓 动 是 使 得 你 的 补 间 看 起 来 更 为 真实 的 优秀 工具 。 它 还 可 
以 用 于 在 应 用 中 没有 整合 物理 引擎 的 情况 下 ， 近 似 地 模拟 一 些 物理 效 
尝试 补 间 沙 盒 中 的 不 同 缓 动 函数 ， 并 注意 它们 的 效果 。 正 如 它们 的 名 字 那 样 ， 多 项 式 缓 动 
函数 Quadratic、Cubic、Quartic 和 Quintic 分别 表示 通过 二 次 、 三 次 、 四 次 和 五 次 函数 来 
实现 缓 动 效 果 。 而 其 他 缓 动 函数 提供 了 正弦 波 、 弹 跳 以 及 弹 得 效应 。 每 个 缓 动 函 数 均 可 用 
于 缓 动 进 入 ( 补 间 的 开始 阶段 )、 缓 动 退 出 ( 补 间 的 结束 阶段 )， 或 者 两 者 都 包括 。 
缓 动 函数 实际 进行 的 操作 是 修改 时 间 的 值 。 例 5-4 展示 了 缓 动 函数 THEEN. Easing.Cubic 的 
代码 。 这 个 缓 动 函数 的 输入 是 一 个 [6..1] 值 域 上 的 数值 (例如 整个 补 间 时 长 的 一 个 分 量 )。 
这 里 的 输入 k 在 缓 动 函 数 中 被 进行 了 三 次 略 处 理 。 也 就 是 说 ， 输 入 的 k 值 越 小 ， 返 回 值 就 
会 更 小 。 不 过 ， 当 k 的 值 达到 1 时， 返回 值 也 是 1。 
例 5-4: Tween.js cubic 缓 动 国 数 

Cubic: { 
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In: function (k ){ 
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return k * k * k; 
}, 
Out: function (k ){ 
return --k* kx*k+1; 
}, 
InOut: function (k ){ 


if((k*=2)<1) return 0.5x kx kx* ki; 
return 0.5*((k-=2)*k*k+2); 


Tween.js 的 缓 动 国 数 基 于 Robert Penner (http://www.robertpenner.com/index2. 
html) 在 动画 方面 的 精细 成 果 。 它 们 提供 了 广泛 而 强大 的 缓 动 方程 ， 包 括 线 
性 方程 、 二 次 方程 、 四 次 方程 、 正 弦 方 程 和 指数 方程 。Penner 的 成 果 被 从 原 
始 的 ActionScript 版 本 转换 为 各 种 语言 的 版 本 ， 包 括 JavaScript、Java、CSS、 
C++ 和 C#， 并 被 整合 进 jQuery 的 动画 通用 组 件 中 。 














正如 我 们 方才 看 到 的 那样 ， 补 间 非 常 适合 用 于 创建 简单 并 且 看 起 来 自然 的 效果 。Tween. 
js 还 允许 你 将 不 同 的 动画 链接 起 来 组 成 更 复杂 的 动画 。 尽 管 如 此 ， 当 你 开始 创建 复杂 的 
动画 队列 的 时 候 ， 一 定 希望 能 够 有 一 个 更 通用 的 解决 方案 。 这 时 候 ， 关 键 帧 动画 就 派 上 
用 场 了 。 


5.4 使 用 关键 帧 来 实现 复杂 动画 


补 间 非常 适 于 用 来 创建 简单 的 过 渡 效 果 。 更 复杂 的 动画 通过 使 用 关键 帧 ， 将 补 间 的 概念 上 
升 了 一 个 层次 。 关 键 帧 动画 包括 一 系列 的 值 ， 以 及 可 能 各 不 相同 的 值 与 值 之 间 的 间隔 时 
间 ， 而 非 指 定 一 对 单 值 来 进行 补 间 。 注 意 关 键 帧 动画 (key frame animation) 这 个 术语 同时 
用 于 基于 帧 的 系统 和 基于 时 间 的 系统 ， 这 是 基于 帧 的 系统 的 遗留 物 。 


关键 帧 数据 由 两 部 分 组 成 : 一 个 时 间 ( 键 ) 列表 和 一 个 值 列表 。 值 列表 表示 在 相应 键 的 时 
间 点 会 被 使 用 的 属性 值 ， 动 画 系统 基于 一 对 键 之 间 的 间隔 时 间 值 计算 补 间 。 


下 面 的 代码 片段 (来 自 一 个 假想 的 动画 引擎 ) 展示 了 一 个 关键 帧 值 采 样 示例 ， 这 些 数 据 是 
用 于 将 一 个 物体 位 置 拾 高 并 将 其 移动 到 远离 相机 的 位 置 的 动画 。 在 一 秒 的 过 程 中 ， 物 体 在 
前 4 秒 中 向 上 移动 ， 在 后 3/4 秒 中 持续 向 上 移动 并 向 远离 相机 的 位 置 移动 。 动 画 系统 在 
前 1/4 秒 中 会 计算 点 (0, 0, 0) 到 点 (0, 1, 0) 之 间 的 补 间 ， 而 在 剩余 的 3/4 秒 中 会 计算 点 (0, 1， 
0) 到 点 (0, 2, 5) 之 间 的 补 间 。 
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var keys = [0, 0.25, 1]; 
var values = [[0, 0, 0], 
[0， 1， 0)， 














关键 帧 动画 支持 简单 的 线性 插值 算法 ， 也 支持 基于 样 条 的 插值 算法 这 样 更 复杂 的 插值 算 
法 ; 换言之 ， 表示 关 键 帧 的 数据 点 可 以 被 看 作 一 个 线性 函数 图 像 上 的 点 ， 也 可 以 被 看 作 一 
个 更 复杂 的 函数 (如 三 次 样 条 ) 的 图 像 。 尽 管 补 间 和 关键 帧 动画 都 采用 了 插值 ， 但 它们 之 
间 存 在 两 个 主要 的 不 同 点 : 关键 帧 动画 可 以 包含 两 个 以 上 的 值 ， 不 同 关键 帧 之 间 的 时 间 间 
隔 可 以 不 同 。 这 使 得 更 强大 的 效果 得 以 实现 ， 并 让 动画 师 可 以 更 好 地 控制 动画 。 


5.4.1 Keyframe.js 一 一 一 个 简单 的 帧 动画 通用 库 


在 学 习 关 键 帧 动画 的 示例 之 前 ， 我 们 需要 首先 认识 一 个 用 于 支持 这 项 技术 的 动画 库 。 
Tween.js 通过 用 动画 队列 代替 简单 的 关键 值 对 来 支持 关键 帧 动画 。 尽 管 如 此 ， 我 还 是 认 
为 这 样 的 语法 有 点 麻烦 。 而 且 在 Tween.js 中 ， 你 也 无 法 改变 连续 关键 点 之 间 的 时 间 间 隔 。 
Three.js 实际 上 提供 了 内 置 的 、 支 持 关 键 帧 的 动画 类 ， 但 这 并 不 适用 于 快速 手写 一 些 初级 
的 效果 ， 它 主要 用 来 支持 导入 JSON、COLLADA 以 及 其 他 格式 的 文件 。 一 般 来 说 ， 关 键 
帧 内 容 本 该 由 3ds Max、Maya 或 Blender 这 类 编辑 工具 直接 计算 生成 ， 而 非 手 动 编写 。 但 
是 如 果 有 一 个 可 以 让 程序 员 方便 地 将 一 些 简单 关键 帧 连接 在 一 起 的 途径 ， 也 是 挺 不 错 的 。 
由 于 找 不 到 合适 的 、 用 于 WebGL 的 简易 关键 帧 解决 方案 ， 我 编写 了 一 个 自己 的 通用 库 ， 


Keyframe.js。 


Keyframe.js 非常 简单 。 它 实现 了 两 个 类 : 一 个 用 于 控制 动画 状态 (开始 、 停 止 、 循 环 逻辑 
等 ) 的 类 KeyFrameAnimator， 以 及 一 个 用 于 计算 两 个 关键 帧 之 间 的 补 间 的 类 Interpolator。 
目前 这 个 库 只 默认 支持 线性 插值 。 不 过 Keyframe.js 允许 程序 员 提 供 缓 动 函 数 ， 为 此 我 们 
可 以 借用 Tween.js 中 实现 的 优秀 的 Penner 方程 ， 而 无 需 重复 发 明 轮 子 。 打 开 文 件 Chapter 
5/keyframeanimation.html， 实 际 观 看 Keyframe.js 的 效果 。 你 会 看 到 一 个 如 图 5-4 中 的 截屏 
所 示 的 页 面 。 我 们 可 以 看 到 一 个 远洋 冒险 的 过 程 : 一 个 箱子 随 着 应 急 的 水 流 上 下 起 伏 ， 天 
空 忽 明 忽 瞳 ， 预 示 着 暴风 雨 即 将 到 来 。 右 边 的 控制 面板 允许 你 改变 动画 时 间 间 隔 、 开 启 / 
关闭 不 同 的 动画 ， 以 及 勾 选 是 否 循环 。 


例 5-5 展示 了 用 于 控制 箱子 动画 的 代码 。 首 先 ， 我 们 创建 一 个 KF .KeyFrameAnimator 对 象 ， 
并 用 这 些 参数 来 初始 化 它 : 是 否 循环 、 动 画 时 长 (以 毫秒 为 单位 )、 缓 动 函 数 (借用 了 
Tween.js 的 )， 以 及 赋予 interps 参数 的 一 个 关键 帧 插值 集合 。 值 得 注意 的 是 ， 与 Tween. 
js 不同 ， 这 里 的 关键 帧 和 值 是 列表 ， 而 不 仅仅 是 数值 对 ， 此 外 ， 不 同 关键 帧 之 间 的 间隔 
也 是 不 同 的 。 根 据 位 置 插值 (target:group.position) 的 详情 ， 箱 子 在 时 刻 t = 0 到 t = 
0.2 之 间 向 左前 方 运行 ， 然 后 迅速 返回 起 始点 (t = 09.2 到 9.25)， 在 这 之 后 它 迅 速 淄 入 水 
中 (t = 0.25 到 9.375)。 在 t = 60.5 时 刻 ， 它 回 到 水 面 并 慢 慢 下 沉 (t = 0.5 到 6.9)， 最 
后 在 t = 1.9 时 晃动 到 原始 位 置 。 注 意 在 Keyframe.js 中 ， 时 间 点 被 表示 为 整个 动画 时 长 
的 一 个 分 量 ; 也 就 是 说 ， 它 们 的 取 值 范围 始终 在 0 到 1 之 间 ， 因 此 一 个 动画 帧 真正 的 时 间 
长 度 等 于 : 


time = tx duration 
























































































































































































































































92 | 第 5 章 





上 上 上 
Key Frame Animation Use these controls to change properties 


Play 


Drag the mouse to rotate the camera 
Use the scroll wheel to zoom. 











图 5-4: 使 用 关键 帧 创建 复杂 动画 


还 有 一 个 用 于 旋转 的 插值 序列 ， 用 来 控制 箱子 围绕 x 轴 的 倾斜 。 注 意 这 个 差 值 序列 和 用 于 
控制 位 置 的 序列 有 不 同 的 关键 帧 数量 ， 这 是 有 效 的 ， 并 且 可 以 说 是 一 个 特性 。 位 置 和 旋转 
的 动画 故意 被 设计 成 存在 一 些 偏差 的 形式 ， 使 得 运动 效果 更 加 无 序 。 最 后 我 们 需要 留意 组 
动 函 数 TNEEN.Easing.Bounce.Inout 的 加 入 ， 这 个 缓 动 函数 提供 的 弹性 效果 将 原本 制 裂 而 不 
协调 的 平移 和 旋转 效果 很 好 地 结合 了 起 来 : 箱子 在 水 中 完美 地 上 下 晃动 出 现 。 最 后 ， 我 们 
只 需 调用 start() 函数 来 启动 整个 动画 。 


例 5-5: 箱子 的 关键 帧 动画 
if (animateCrate) 


. 
crateAnimator = new KF.KeyFrameAnimator; 
crateAnimator .init({ 


interps: 
[ 
{ 
KEVSs [Os S20 3255 ral5. sd “9s 1 
values:[ 
{x: 0, y:0, z: 0 }, 
CX 5 V0 2 05 
{xX Os yi0 -ZO 3; 
{XS Ye 2 2 Ss 
{xX 0 yO 2 0 3 
ER 2 3 
{x: 0, y:0, z: 0 }, 
加 
target:group.position 
]， 
{ 


keys:[0, .25, .5, .75, 1], 
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values:[ 
{0 ZT.0 
{ x : Math.PI / 12, z : Math.PI / 12 }, 
{x: 0,z : Math.pPIi / 12 }, 
{ x : -Math.PI / 12, z : -Math.PI / 12 }， 
{0 ZE 0 


target:group.rotation 
]， 
]， 
Loop: loopAnimation, 
duration:duration * 1000， 
easing:TWEEN.Easing.Bounce.InOut, 


了 


crateAnimator .start(); 


} 


水 面 和 上 暴 风雨 的 动画 也 可 以 用 类 似 的 方法 来 处 理 ， 但 其 他 动画 都 不 需要 使 用 缓 动 函 数 。 一 
个 动画 用 来 使 水 面 上 下 运动 (只 需 简单 地 将 水 面 围绕 x 轴 旋 转 ) ， 另 一 个 动画 用 于 创造 水 
看 波动 ， 它 本 质 上 是 通过 设置 纹理 映射 的 偏 移 值 (offset 属性 ) 来 “滚动 ”纹理 而 实现 
的 ， 还 有 一 个 动画 用 于 通过 创建 RGB 值 的 插值 来 控制 内 光 。 


这 个 示例 展示 了 关键 帧 是 如 何 创建 出 比 Tween.js 所 支持 的 基本 过 渡 更 有 趣 的 效果 。 关 键 帧 
很 容易 被 表示 为 键 值 数组 ， 从 而 允许 动画 组 件 顺 次 设置 不 同 间隔 的 补 间 。 在 实际 应 用 中 ， 
程序 员 很 少 手动 去 创建 这 类 动画 ， 事 实 上， 艺术 家 们 会 使 用 专业 的 工具 来 完成 这 些 工 作 。 
这 是 开发 复杂 效果 的 优先 选择 ， 尤 其 是 涉及 复杂 物体 时 ， 这 是 下 一 市 要 讨论 的 主题 。 


5.4.2 ”使 用 关键 帧 创建 关节 动画 


到 目前 为 止 , 我们 讨论 的 动画 策略 可 以 用 于 在 场景 中 使 单个 对 象 原 地 运动 (例如 旋转 ) 
或 将 其 移动 到 其 他 位 置 ， 但 在 变换 层级 的 辅助 下 ， 它 们 也 可 以 用 来 创建 复合 物体 中 的 复 
杂 运 动 。 

假设 我 们 想 要 创建 一 个 走动 并 挥手 的 机 器 人 。 我 们 需要 以 层级 结构 来 组 织 这 个 机 器 人 的 模 
型 : 机 器 人 的 身体 包含 上 半身 和 下 半身 ， 上 半身 包括 手臂 和 躯干 ,手臂 包 括 上 和 彭 和 下 臂 ， 
等 等 。 通 过 正确 地 构建 层级 结构 并 在 正确 的 部 位 设置 动画 ， 我 们 可 以 让 机 器 人 的 手臂 和 腿 
动 起 来 。 这 项 通过 层级 结构 来 结合 离散 部 件 组 成 主体 ， 并 为 各 级 组 合体 添加 动画 的 技术 ， 
被 称 为 关节 动画 (articulated animation ) 。 

Three.js 的 示例 中 提供 了 一 个 非常 好 的 关节 动画 演示 。 加 载 Three.js 的 示例 文件 examples/ 
webgl_loader_collada_keyframe.html， 你 会 看 到 一 个 展示 人 泵 内 部 构造 的 动画 模型 。 随 着 泵 模 
型 的 旋转 ， 它 开始 装配 和 拆 解 自身 ， 上 暴 露出 各 种 部 件 ， 如 阀门 、 热 片 、 齿 轮 、 轴 承 座 、 曙 
栓 等 ， 这 些 部 件 组 成 了 泵 。 每 个 部 件 都 有 自身 单独 的 动画 ， 尽 管 如 此 ， 借 助 Three.js 的 变 
换 层 级 ， 每 个 部 件 在 进行 其 自身 的 动画 步骤 ， 如 打开 /关闭 ， 以 及 将 一 个 部 件 插入 另 一 个 
部 件 等 时 ， 都 可 以 同时 跟随 其 祖先 元 素 运 动 。 图 5-5 展示 了 这 个 泵 。 



















































































































































































5-5: 关节 动画 一 一 使 用 关键 帧 和 变换 层级 展示 有 泵 的 内 部 工作 (使 用 Kuda 的 开源 编辑 系统 创建 的 
COLLADA 模型 ，Kuda 项 目 主页 地 址 为 https://code.google.com/p/kuda/) 


这 个 泵 模型 通过 COLLADA 文件 格式 加 载 (.dae 文件 后 级 )， 这 是 一 个 基于 XML 的 文 
本 格式 ， 用 于 描述 3D 内 容 。COLLADA 可 以 用 来 表示 单独 的 模型 或 整个 场景 ， 并 支持 
材质 、 灯 光 、 相 机 和 和 动画。 我们 不 打算 太 深 入 地 了 人 解 这 些 细节 ， 不 过 有 一 点 需要 了 解 ， 
COLLADA 中 的 关键 帧 数据 看 起 来 类 似 下 面 这 个 来 自 泵 模型 文件 (examples/models/collada/ 
pump/pump.dae) 的 内 容 片 段 : 


<animation id="camTrick_G.translate camTrick_G"> 

















<source id="camTrick G..." name="camTrick _G..."> 
<fLoat_array id="camTrick G..." count="3">0.04166662 ... </float_array> 
<source id="camTrick G..." name="camTrick G..."> 
<fLoat_array id="camTrick G..." count="3">8.637086 ... </float_array> 





COLLADA 中 的 <animation> 元 素 定 义 了 一 个 动画 。 两 个 <float_array> 子 元 素 分 别 定义 
了 键 和 值 ， 这 些 键 值 被 用 于 控制 一 个 名 为 camTrick_6 的 物体 的 x 值 变 换 。 键 值 以 秒 为 单位 
表示 。 在 整个 7.083 33 秒 的 过 程 中 ，canTrick_G 的 会 沿 x 轴 从 8.637 086 移动 到 0。 在 这 两 
个 关键 帧 之 间 还 有 一 个 位 于 6.5 秒 处 的 关键 帧 ， 它 对 应 的 x 值 为 7.794 443。 因 此 整个 动画 
中 ， 在 开始 的 6.5 秒 ， 物 体 的 x 变换 以 非常 缓慢 的 速度 进行 ， 随 后 在 剩 下 的 0.583 33 秒 里 
快速 完成 整个 动画 。 在 整个 COLLADA 文件 中 ， 类 似 的 作用 于 泵 模型 各 个 部 件 物 体 的 动画 
元 素 还 有 很 多 (总共 74 个 )。 


例 5-6 展示 了 示例 中 用 于 设置 动画 的 代码 片段 。 这 个 示例 使 用 了 Three.js 内 置 的 THREE. 
KeyFrameAnimation 类 和 THREE.AnimationHandler 类 。THREE.KeyFrameAnimation 类 实现 了 
通用 的 关键 帧 动画 类 型 ， 用 于 支持 COLLADA 和 其 他 可 以 包含 动画 的 文件 格式 。THREE. 
AnimationHandler 是 一 个 单 例 ， 用 于 管理 一 个 动画 列表 ， 并 在 应 用 的 运行 循环 中 保证 它们 
的 更 新 。( 这 些 类 的 代码 可 以 在 Three.js 项 目 文件 的 src/extras/animation 目录 下 找到 。) 
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例 5-6: 初始 化 Three.js 的 关键 帧 动画 


var animHandler = THREE.AnimationHandler; 
for ( var i = 0; i < kfAnimationsLength; ++i ) { 


var animation = animations[ i ]; 
animHandler .add( animation ); 


var kfAnimation = new THREE.KeyFrameAnimation( 
animation.node, animation.name ); 

kfAnimation.timeScale = 1; 

kfAnimations.push( kfAnimation ); 


3 


示例 在 最 终 调用 每 个 动画 的 play() 函数 来 运行 动画 之 前 ， 还 需要 进行 一 些 设 置 。play() 
需要 两 个 参数 : 一 个 循环 (loop) 标志 和 一 个 可 选 的 开始 时 间 (默认 值 0 表示 立即 开始 ) : 


animation.play( false, 0 ); 


这 个 示例 展示 了 关键 帧 动画 是 如 何 结合 变换 层级 来 创建 复杂 关 市 效果 的 。 关 节 动 画 通常 被 
当 作 构 造 机 械 对 象 动画 的 基础 。 然 而 在 本 童 的 后 面部 分 ， 关 市 动画 也 是 用 于 驱动 蒙 皮 动 画 
下 的 骨骼 的 必 不 可 少 的 因素 。 


和 其 他 随 Three.js 提供 的 文件 格式 加 载 器 一 样 ， COLLADA 并 不 是 核心 代码 
包 的 一 部 分 ， 而 是 随 示 例 提供 。Three.js COLLADA 加 载 器 的 源 代码 可 以 在 
文件 examples/js/loaders/ColladaLoader.js 中 找到 。COLLADA 格式 将 会 在 第 8 
章 中 详细 讨论 。 






































5.5 使 用 曲线 和 路 径 创 建 平滑 自然 的 运动 


关键 帧 非常 适合 表示 一 系列 具备 不 同时 间 间 隔 的 过 渡 。 通 过 结合 关节 动画 和 层级 结构 ， 我 
们 可 以 创建 复杂 的 交互 。 尽 管 如 此 ， 至 今 为 止 我 们 观看 的 示例 都 显得 非常 机 械 和 人 工 ， 这 
是 由 于 它们 都 使 用 了 线性 插值 的 缘故 。 现 实 世界 充满 了 曲线 : 汽车 沿 弯 曲 的 道路 行驶 ， 飞 
机 沿 着 弯曲 的 航线 飞行 ， 子 弹 沿 抛物 线 掉 落 ， 等 等 。 试 图 用 线性 插值 去 模拟 这 些 ， 只 会 六 
生 呆 板 、 不 自然 的 结果 。 我 们 可 以 使 用 一 个 物理 引擎 ， 但 对 于 大 多 数 应 用 来 说 ， 这 有 点 过 
重 了 。 茶 些 时 候 我 们 只 需 创建 一 个 看 起 来 自然 的 预定 义 动画 ， 而 无 需 为 模拟 物理 特效 而 耗 
费 计 算 。 
关键 帧 数据 不 局 限于 用 来 描述 线性 动画 。 它 也 可 以 被 看 作曲 线 上 的 一 些 点 。 动 画 中 最 常用 
的 曲线 是 样 条 曲线 (spline curve) 一 种 光滑 连续 的 曲线 。 被 称 为 B 样 条 曲线 的 某 类 
样 条 曲线 被 广泛 地 应 用 于 计算 机 图 形 中 ， 因 为 它们 可 以 相对 快速 地 被 计算 出 来 。 我 们 用 一 
个 数据 点 集合 定义 了 样 条 曲线 的 基本 形状 ， 并 在 此 基础 上 添加 用 于 调节 曲线 形状 的 控制 
点 (control point) 。 图 5-6 中 用 黑色 点 标明 了 简单 B 样 条 曲线 的 控制 点 。 如 果 你 使 用 过 像 
Adobe Illustrator 这 类 的 专业 绘图 程序 ， 那 肯定 对 用 于 修改 样 条 形状 的 控制 点 非常 熟悉 。 



























































5-6: 一 个 B 样 条 曲线 ,由 Wojciech mula 提供 (遵循 知识 共享 CC0 1.0 通用 公共 领域 贡献 协议 使 用 ) 
( 另 见 彩 插图 5-6) 








比 起 简单 的 线性 插值 ， 样 条 插值 更 为 复杂 ， 样 条 插值 多 项 式 类 似 于 Tween.js 中 的 那些 组 
动 函 数 实现 ， 并 使 用 位 于 关键 值 两 侧 的 数值 点 来 计算 出 平滑 的 曲线 。 在 本 书 中 我 们 不 对 
样 条 曲线 做 非常 详细 的 解释 。 图 5-7 直观 地 展示 了 样 条 曲线 是 如 何 工作 的 : 为 了 计算 出 
曲线 上 点 Pl 和 点 P2 之 间 的 插值 ， 我 们 同时 需要 利用 控制 点 Pe 和 P3 来 计算 出 一 个 样 条 
曲线 上 的 值 。 


























插值 
PO P2 
”we 
t=0.0 t=1.0 











图 5-7: 样 条 插值 ， 经 许可 进行 了 修改 


样 条 曲线 有 很 多 种 ， 包 括 B 样 条 、 三 次 贝 塞 尔 样 条 以 及 Catmull-Rom 样 条 
(以 动画 天 才 、Pixar 的 创始 人 Ed Catmull 的 名 字 命 名 ) 。Catmull-Rom 因 其 比 
贝 塞 尔 曲线 更 加 容易 构建 和 计算 的 特点 而 流行 起 来 。Three.js 提供 了 一 个 内 
置 的 、 使 用 了 Catmull-Rom 插值 算法 的 动画 类 。 有 具体 可 以 查看 Three.js 源 文 


件 src/extras/animations/animation.js。 











还 有 许多 优秀 的 在 线 Catmull-Rom 教程 ， 包 括 http://flashcove.net/795/cubic- 
spline-generation-in-as3-catmull-rom-curves/ 和 http:/www.mvps.org/directx/ 


articles/catmull/。 
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样 条 动画 通常 需要 同时 计算 方向 和 人 位置。 例如， 如 果 你 需要 使 某 个 物体 沿 一 条 曲线 生成 动 
画 ， 那 么 为 了 使 得 整个 运动 过 程 看 起 来 更 自然 ， 你 需要 同时 控制 它 的 转弯 、 倾 斜 和 滚动 。 
这 就 需要 在 每 个 点 都 重新 计算 物体 的 方向 。 图 5-8 描绘 了 这 个 过 程 。 对 于 曲线 的 每 个 点 ， 
我 们 都 需要 计算 其 切线 (tangent)、 法 向 量 (normal) 及 副 法 线 (binormal)。 通 俗 地 说 ， 切 
线 是 标示 了 曲线 方向 ， 并 和 曲线 只 在 一 个 点 上 相交 的 直线 。 法 向 量 指 的 是 垂直 于 曲线 方向 
(及 切线 ) 的 线条 。 副 法 线 是 另外 两 条 线 的 又 积 。 这 三 个 向 量 构成 了 被 称 为 TNB 帧 的 参考 
帧 ， 它 定义 了 一 个 物体 随 路 径 运 动 的 方向 。 























图 5-8: 样 条 动画 的 坐标 帧 ; 切线 、 法 向 量 和 副 法 线 分 别 用 蓝 色 (向 前 )、 绿色 (向 上 ) 和 红色 (向 右 ) 
箭头 来 表示 ; 图片 由 Cedric Bazillou 提供 ， 经 许可 进行 了 修改 ( 另 见 彩 插图 5-8) 


在 Three,js 提供 的 示例 中 有 一 个 非常 好 的 随 路 径 运 动 的 例子 。 打 开 文 件 examples/webgl_ 
geometry_extrude_splines.html， 确保 按钮 Camera Spline Animation View 处 于 开 启 (ON) 
状态 ， 就 可 以 看 到 如 图 5-9 所 描绘 的 动画 。 相 机 沿 着 近 处 的 样 条 曲线 持续 改变 它 的 位 置 和 
方向 。 这 个 示例 是 程序 驱动 的 ， 通 过 代码 来 计算 实时 样 条 插值 和 TNB 帧 。 但 它 完 全 可 以 
用 一 个 可 复 用 的 路 径 跟随 (path-following) 动画 类 来 打包 。 


0 




















5-9: 沿路 径 做 动画 的 相机 
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5.6 ”使 用 变形 目标 来 创建 人 物 和 面部 动画 


关键 帧 和 关节 动画 非常 适用 于 在 场景 中 移动 物体 ， 但 许多 动画 还 需要 改变 物体 本 身 的 几何 
形状 。 用 于 实现 这 类 效果 的 最 常用 方法 是 变形 目标 动画 (morph target animation) ， 简 称 变 
形 。 变 形 使 用 基于 顶点 的 插值 来 改变 网 格 的 顶点 。 通 常 ， 网 格 顶 点 的 一 个 子 集 及 其 索引 一 
起 ， 被 当 作 即 将 用 在 补 间 中 的 变形 目标 (morph target) 存储 起 来 。 变 形 目 标 各 顶点 值 之 间 
的 插值 ， 以 及 使 用 了 这 些 插 值 的 动画 ， 组 成 了 网 格 顶点 的 变形 。 


变形 目标 尤其 适合 用 来 表现 面部 ， 以 及 其 他 不 容易 用 蒙 皮 动画 (在 下 一 市 中 会 说 明 ) 来 表 
示 的 丰富 细节 。 它 们 非常 紧凑 ， 并 且 不 需要 由 许多 面部 骨头 组 成 的 高 度 精细 的 骨骼 。 此 
外 ， 它 允许 动画 制作 人 员 从 顶点 级 别 以 调整 网 格 的 方式 来 创建 各 种 表情 。 图 5-10 描绘 了 如 
何 使 用 变形 来 创造 面部 表情 。 每 个 表情 ， 如 振 嘴 和 微笑 ， 都 是 由 一 个 包含 了 口 部 和 周围 区 
域 的 顶点 集合 来 表现 的 。 

















图 5-10: 面部 变形 ， 遵 循 知识 共享 署名 -相同 方式 共享 3.0 未 本 地 化 版 本 协议 使 用 


变形 不 仅仅 可 以 用 于 表现 面部 。Three.js 工程 目录 中 的 一 些 示 例 使 用 变形 来 构建 整个 角色 
的 动画 。 图 5-11 描绘 了 用 变形 来 进行 动画 的 角色 。 这 些 角色 模型 由 id Software 的 MD2 格 
式 的 源 文件 提供 。MD2 格式 是 一 种 流行 的 基于 变形 的 格式 ， 它 被 用 于 id Software 公司 的 
游戏 (如 Ouake 71) 中 的 玩家 角色 动画 。MD2 文件 在 这 里 被 转换 成 Three.js JSON 文件 格 
式 (在 第 8 章 说 明 ) 。 
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5-11: 用 变形 目标 创建 的 角色 动画 ， 模 型 由 MD2 格式 转换 成 Three.js JSON 格式 (“Ogro” 角 色 
由 Magarnigal 提供 ) 


加 载 文 件 examples/webgl_morphtargets_md2_control.htm 来 观看 这 些 动 画 。 你 会 看 到 许多 第 
拙 地 转动 并 往 肩膀 左右 张望 的 怪物 (ogre) 角色 。 键 盘 上 的 WSAD 键 可 以 控制 角色 在 场景 
中 跑 动 ， 并 从 空闲 动画 切换 到 走动 和 转弯 的 动画 队列 。 效 果 非 常 真 实 。 

打开 位 于 examples/models/animated/ogro/ogro-lightjs 的 MD2 文件 ， 感 受 一 下 变形 对 象 数 据 
是 什么 样 的 。 在 第 18 行 左 右 ， 你 会 看 到 如 下 开头 的 JSON 属性 : 


"morphTargets": [ 
{ "name": "stand001", "vertices": [0.6,-2.7,1.5,-5.5,-3.3,-0.6 ... 


完整 的 数据 占据 了 很 多 行 。 变 形 目标 (morphTargets) 数组 中 的 每 个 元 素 都 是 一 个 单独 
的 变形 目标 ;每 个 变形 目标 都 包含 怪物 网 格 的 全 部 项 点， 但 顶点 的 位 置 各 不 相同 。Three. 
js 通过 遍历 模型 目标 集合 ， 使 用 顶点 插值 来 协调 一 个 目标 到 下 一 个 的 变化 。 在 THREE. 
MD2CharacterComplex 类 (Three.js 示例 文件 examples/js/MD2CharacterComplex.js) 中 ， 你 
可 以 找到 为 MD2 角色 加 载 、 设 置 以 及 添加 动画 的 代码 。 


本 示例 使 用 一 个 由 Klas (昵称 OutsideOfSociety，https:Wtwitter.com/oosmoxie- 
code, 瑞士 交互 开发 团队 North Kingdom 的 一 名 成 员 ) 编写 的 优秀 在 线 工 具 ， 
将 MD2 格式 的 文件 转换 为 Three.js 格式 的 文件 。 想 了 解 更 多 关于 这 个 转换 
器 的 信息 ， 请 访问 Klas 的 博客 文章 (http:/oos.moxiecode.com/blog/index. 
php/2012/01/md2-to-json-converter) 。 

















5.7 ”使 用 蒙 皮 来 构建 角色 动画 


关节 动画 在 表现 无 生命 物体 时 非常 出 色 ， 像 机 器 人 、 汽 车 、 机 器 ， 等 等 。 但 在 表现 有 机 物 








100 | 第 5 章 


体 运动 的 时 候 则 并 不 理想 。 微 风 中 摇 忠 的 植物 ， 踢 蹦跳 跳 的 动物 ， 以 及 跳舞 的 人 们 ， 所 有 
这 些 都 涉及 网 格 的 几何 形状 变化 ， 肢体 的 扭 动 ， 皮 肤 的 延展 ， 肌 肉 的 收缩 。 你 几乎 不 可 能 
用 关节 动画 的 模式 来 很 好 地 模拟 这 些 事 物 。 因 此 我 们 转向 另 一 项 被 称 为 莹 皮 动画 (skinned 
animation，skinning) 的 技术 ， 这 项 技术 又 被 称 为 骨骼 动画 (skeletal animation) ， 或 单 网 格 


动画 (single mesh animation ) 。 


蒙 皮 动 画 涉及 对 网 格 〈 或 者 说 ， 蒙 皮 ) 上 的 当前 顶点 进行 实时 变换 。 动 画 由 一 个 被 称 为 骨 
骼 (或 支架 ) 的 关节 物体 层级 结构 来 驱动 。 上 骨骼 仅仅 被 用 作 动 画 的 皮下 机 制 ， 我 们 不 会 在 
屏幕 上 看 到 它 。 骨 骼 的 变化 ， 以 及 描述 骨骼 变化 是 如 何 影 响 蒙 皮 网 格 上 不 同 区 域 的 额外 数 
据 ， 共 同 驱 动 蒙 皮 动 画 。 图 5-12 描绘 了 一 个 简单 的 骨骼 及 其 相关 的 蒙 皮 。 


毫 不 奇怪 ， 上 骨骼 由 骨头 组 成 。 一 个 层级 结构 以 你 能 够 直观 感受 的 方式 将 骨头 组 织 起 来 。 正 
如 那 首 老 歌 里 所 唱 的 那样 : 脚 骨 连 接 到 腿 骨 ， 腿 骨 连 接 到 膝盖 骨 ， 等 等 。 和 关节 动画 类 
似 ， 一 个 骨头 的 变换 也 会 影响 其 子 层 级 。 然 而 和 关节 动画 不 一 样 的 是 ， 骨 骼 是 不 可 见 的 。 


骨骼 中 的 每 根 骨头 都 和 网 格 上 的 一 个 顶点 集合 及 每 个 相关 顶点 的 融合 权重 (blend weight， 
又 称 顶 点 权重 ，vertex weight) 相关 联 。 融 合 权重 定义 了 每 根 骨头 与 相关 顶点 的 关联 程度 。 
每 个 顶点 都 可 以 关联 多 根 骨头 ， 因 此 每 个 顶点 最 终 的 位 置 和 方向 由 所 有 关联 骨头 的 变换 ， 
经 各 自 权 重 处 理 后 的 和 来 决定 。 这 听 起 来 的 确 很 复杂 。 蒙 皮 动 画 多 数 时候 都 是 使 用 编辑 工 
有 具 而 不 是 手动 创建 的 。 它 们 涉及 的 算法 同样 非常 复杂 ;， 当前 ， 绝 大 多 数 的 实时 动画 引擎 在 
可 能 的 情况 下 都 会 利用 GPU 来 计算 蒙 皮 动画 ， 包 括 Three.js。 







































































图 5-12: 一 个 包含 皮下 骨骼 的 角色 网 格 ， 适 合用 蒙 皮 动 画 来 表现 一 一 来 自 Frank A. Rivera 创建 的 一 
个 蒙 皮 教程 
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打开 Three.js 工程 目录 下 的 文件 examples/webgl_animation_skinning.html， 实 际 观 看 蒙 皮 动 
画 的 示例 。 你 会 在 野牛 模型 上 观察 到 许多 真实 的 效果 。 点 击 开 始 动画 ， 野 牛 会 以 看 起 来 非 
常 自然 的 动作 在 原 地 跑 动 ， 如 图 5-13 所 示 。 




















5-13: 在 Three.js 中 使 用 了 蒙 皮 的 网 格 动画 ， 野 牛 模型 来 自 RO.ME 


让 我 们 来 读 一 读 这 个 示例 的 部 分 代码 ， 以 了 解 Three.js 是 如 何 实现 蒙 皮 的 。 首 先 ， 我 们 
通过 创建 一 个 THREE.JSONLoader 对 象 ， 并 调用 其 Load() 方法 来 加 载 野牛 模型 。 这 个 类 
从 Three.js JSON 格式 的 文件 中 将 模型 加 载 进 来 。 这 个 格式 包含 了 蒙 皮 信息 以 及 几何 形 
状 信息 。 

var Loader = new THREE.JSONLoader(); 

loader .load( "obj/buffalo/buffalo.js", createScene ); 


load() 的 第 二 个 参数 是 一 个 回调 函数 ， 它 会 在 文件 被 下 载 并 解析 完成 后 调用 。 例 5-7 展示 
了 回调 函数 createscene() 的 一 部 分 代码 ， 相 关 的 代码 行 以 粗 体 标 出 
例 5-7: 用 于 在 文件 加 载 完成 后 设置 蒙 皮 动画 的 回调 国 数 


function createScene( geometry, materials ) { 








o 


buffalos = []; 
animations = []; 


var X，y， 
buffalo, animation, 
gridx = 25, gridz = 15, 
sepx = 150, sepz = 300; 


var material = new THREE.MeshFaceMaterial( materials ); 


var originalMaterial = materials[ 0 ]; 





C 


originalMaterial.skinning = true; 
originalMaterial.transparent = true; 
originalMaterial.alphaTest = 0.75; 

THREE .AnimationHandler .add( geometry.animation ); 
for( x = 0; x < gridx; x ++ ) { 


for(z=0;z < gridz; z ++ ){ 


buffalo = new THREE.SkinnedMesh( geometry， 
material, false ); 


buffalo.position.x = - ( gridx - 1 ) * sepx * 0.5+ 
x * sepx + Math.random() * 0.5 * sepx; 


buffalo.position.z = - ( gridz - 1 ) * sepz * 0.5 + 
z * sepz + Math.random() * 0.5 * sepz - 500; 


buffalo.position.y = 
buffalo.geometry.boundingSphere.radius * 0.5; 

buffalo.rotation.y = 0.2 - Math.random() * 0.4; 

scene.add( buffalo ); 

buffalos.push( buffalo ); 


animation = new THREE.Animation( buffalo, "take_001" ); 
animations.push( animation ); 


offset.push( Math.random() ); 
} 
reateScene() 运行 一 个 循环 ， 通 过 加 载 进 来 的 一 个 几何 形状 来 创建 野牛 网 格 的 多 个 实例 。 





注意 这 里 创建 的 网 格 类 型 : 在 这 里 我 们 并 没有 创建 在 之 前 的 示例 中 所 熟悉 的 THREE.Mesh， 
而 是 使 用 了 一 种 不 同 的 网 格 类 型 一 一 THREE.SkinnedMesh。 这 个 类 型 在 Three.js 中 会 通过 一 
个 用 于 在 GPU 上 执行 蒙 皮 动 画 的 特殊 顶点 着 色 器 来 演 染 ， 以 达到 提升 性 能 的 目的 。 


C 




















reatescene() 还 使 用 了 Three.js 内置 的 动画 类 THREE.Animation 和 THREE.Animation 





Handler 。THREE.Animation 实现 了 通用 的 关键 帧 动画 ， 在 蒙 皮 动画 中 ， 它 被 用 于 驱动 骨骼 
动画 。THREE.AnimationHandler 是 一 个 存储 了 场景 中 所 有 动画 ， 并 保证 它们 在 应 用 运行 循 
环 中 不 断 更 新 的 单 例 。 我 们 的 回调 函数 首先 通过 调用 THREE.AnimationHandler.add()， 问 
其 传 入 几何 形状 的 动画 数据 ， 来 将 动画 数据 加 入 动画 处 理 程 序 队 列 。 随 后 ， 这 有 段 代码 为 每 
个 野牛 实例 创建 了 一 个 THREE.Animation 对 象 ， 将 使 用 变量 buffalo 存储 的 野牛 实例 和 来 
自 JSON 文件 名 为 take_061 的 动画 关联 起 来 。 
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月 


在 动画 初始 化 完成 之 后 ， 我 们 开始 播放 它们 。 这 个 应 用 通过 在 鼠标 点 击 时 调用 函数 








tartAnimation() 来 播放 动画 。 如 例 5-8 中 ，startAnimation() 循环 访问 动画 数组 ， 并 调 
日 数组 中 每 个 元 素 的 play() 方法 。 它 还 为 每 个 动画 都 赋予 了 一 个 各 不 相同 的 随机 时 间 偏 








移 ， 用 以 避免 这 些 动物 的 动作 完全 同步 。 
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例 5-8: 播放 蒙 皮 动画 


function startAnimation() { 
for( var i = 0; i < animations.length; i ++ ) { 


animations[ i ].offset = 0.05 * Math.random(); 
animations[ i ].play(); 


} 


dz = dstep; 
playback = true; 


} 


如 果 你 对 这 里 的 JSON 动画 格式 的 细节 感 兴趣 ， 那 么 可 以 查看 文件 examples/obj/buffalo.js。 
在 整个 文件 中 查找 属性 bones、skinWeights 和 skinIndices 来 看 看 骨骼 数据 是 如 何 表示 的 
查找 属性 animation， 它 包含 了 用 于 控制 骨骼 动画 的 关键 帧 层级 结构 。 底 层 实现 的 东西 非 
常 多 ， 并 且 Threejjs 在 此 基础 上 添加 了 许多 值 ， 而 并 不 仅仅 是 一 个 使 用 GPU 计算 的 、 基 于 
着 色 器 的 蒙 皮 实现 。 


5.8 使 用 着 色 器 来 进行 动画 

到 现在 为 止 ， 我 们 在 本 章 中 所 研究 过 的 技术 ， 例 如 关键 帧 、 补 间 和 蒙 皮 ， 都 是 可 以 用 
JavaScript 来 实现 的 ， 不 过 你 也 可 以 使 用 GLSL 可 编程 着 色 器 来 实现 硬件 加 速 的 版 本 。 
Three.js 中 的 动画 同时 使 用 两 种 策略 : 纯 JavaScript 的 关键 帧 系统 ， 以 及 作为 Three.js 内 置 
材质 (如 Phong 和 Lambert) 的 着 色 器 代码 的 一 部 分 而 实现 的 变形 和 蒙 皮 。 如 果 网 格 中 包 
含 蒙 皮 和 变形 的 数据 (使 用 前 面 所 描述 的 THREE.SkinnedMesh 或 THREE.MorphAnimMesh)， 那 
么 Three.js 会 使 用 这 些 信息 来 计算 新 的 顶点 位 置 。 


如 果 你 对 Three.js 中 蒙 皮 和 变形 的 详细 代码 有 兴趣 ， 打 开 Three.js 的 源 文件 
src/renderers/WebGL Shaders.js 并 在 其 中 搜索 “skin” 和 “morph”， 不 过 我 建 
议 你 同时 深入 了 解 GLSL 语言 本 身 以 及 Threejs 中 的 着 色 器 实现 。 如 果 你 能 
够 对 这 两 方面 都 有 深入 了 解 ， 这 将 是 非常 有 意义 和 有 价值 的 。 
































除了 可 以 用 GPU 来 实现 蒙 皮 之 类 通用 技术 的 性 能 优化 ， 我 们 还 可 以 编写 GLSL 代码 来 实 
现任 意 的 效果 。 也 许 我 们 想 要 创建 一 个 波光 办 动 的 海洋 表面 ， 来 模拟 波浪 波动 时 光 的 反射 
和 折射 ， 又 或 许 我 们 想 要 创建 随 风 摆动 的 草地 。 我 们 可 以 用 纯 JavaScript 代码 来 实现 这 些 
效果 ， 但 是 GLSL 更 适合 用 来 操作 大 规模 的 顶点 和 图 像 数 据 参 与 的 计算 。Three.js 项 目 文 
件 中 提供 了 一 个 优秀 的 基于 着 色 器 的 动画 示例 。 打 开 示例 文件 examples/webgl_shader_lava. 
html， 你 会 看 到 一 个 缓 缓 旋转 的 、 表 面 是 流动 熔岩 的 圆 环形 ， 如 图 5-14 所 示 。 
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5-14: 使 用 GLSL 创建 的 熔岩 动画 效果 ; 着色 器 代码 由 TheGameMaker 提供 http://irrlicht. 


sourceforge.net/forum//viewtopic.php?t=21057) 


流动 的 熔岩 动画 代码 通过 一 个 包含 自 定 义 GLSL 代码 的 THREE.ShaderMaterial 变 








现 。 让 我 们 来 看 看 。 例 5-9 展示 了 设置 shaderMaterial 的 代码 。 许 多 uniform 变量 被 传 
入 着 色 器 。 与 实现 动画 相关 的 重要 变量 包括 时 间 (time) 和 两 个 纹理 映射 ，texturel 和 




















texture2。 稍 后 你 会 看 到 ， 仅 用 这 三 个 参数 ， 加 上 一 点 








由 数字 提供 的 特殊 效果 ， 就 创建 了 











以 假 乱 真 的 流动 熔岩 。 
例 5-9: 创建 圆 环 网 格 和 ShaderMaterial 


uniforms = { 


fogDensity: { type: "f", value: 0.45 }, 
fogColor: { type: "v3", 
value: new THREE.Vector3( 0, 0, 0 ) }， 
time: { type: "f", value: 1.0 }， 
resolution: { type: "v2", 
value: new THREE.Vector2() }， 
uvScale: { type: "v2", 
value: new THREE.Vector2( 3.0, 1.0 ) }, 
texture1: { type: "t", 
value: THREE.ImageUtiLLs .LoadTexture( 
"textures/Lava/cLoud .png"” ) }， 
texture2: { type: "t", 
value: THREE.ImageUtiLLs .LoadTexture( 
"textures/Lava/LavatiLe.jpg" ) } 


上 


uniforms .texture1.VvVaLue.wrapS = 


uniforms .texturel.vaLue.wrapT = THREE.RepeatWrapping; 


uniforms.texture2.value.wrapSs = 


uniforms.texture2.value.wrapT = THREE.RepeatWrapping; 
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现在 所 有 的 uniform 配置 已 经 就 绕 ， 我 们 可 以 着 手 创建 着 色 器 材质 了 。 我 们 需要 为 构造 函 
数 提供 顶点 和 片段 着 色 器 代码 。 注 意 下 面 用 于 完成 这 件 事 的 技术 : 我 们 使 用 HTML 中 的 
<script> 元 素来 存放 GLSL 源 代码 ， 并 访问 script 的 textContent 属性 来 获取 GLSL 文 
本 。 对 比 一 下 我 们 之 前 看 到 的 着 色 器 示例 。 使 用 这 个 方法 ， 我 们 可 以 以 更 直截了当 的 方式 
来 编写 着 色 器 代码 ， 而 无 需 使 用 转 义 换行 符 来 连接 多 行文 本 字符 串 。 稍 后 我 们 将 看 到 具体 
的 GLSL 代码 。 














var size = 0.65; 
material = new THREE.ShaderMaterial( { 


uniforms: uniforms, 

vertexShader: document.getELementById( 
'vertexShader' ).textContent, 

fragmentShader: document.getELementById( 
'fragmentShader' ).textContent 


下 
随后 我 们 创建 一 个 具备 THREE.ShaderMaterial 材质 的 圆 环 网 格 ， 并 将 其 添加 到 场景 中 。 


mesh = new THREE.Mesh( 
new THREE.TorusGeometry( size, 0.3, 30, 30 )， 
material ); 
mesh.rotation.x = 0.3; 
scene.add( mesh ); 


着 色 器 算法 非常 清晰 。 它 使 用 了 两 个 纹理 上 映射， 一 个 用 于 提供 基础 的 熔岩 颜色 和 视觉 间 
果 ， 另 一 个 云 纹理 作为 “噪声 ”的 来 源 ， 用 于 对 基础 纹理 添加 扰动 ， 以 形成 流动 的 视觉 效 
果 。 两 个 纹理 如 图 5-15 所 示 。 























3 py 
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图 5-15: 用 于 熔岩 和 噪声 的 纹理 映射 




















顶点 着 色 器 的 GLSL 代码 非常 简单 ， 参 见 例 5-10。 与 大 多 数 着 色 器 一 样 ， 它 使 用 模型 视图 
和 阵 和 投影 矩阵 来 乘 上 顶点 ， 将 其 映射 到 屏幕 空间 ， 并 将 这 个 值 输出 到 一 个 内 置 的 GLSL 
变量 gl_Position 中 。 在 此 之 前 ， 我 们 定义 了 一 个 varying 参数 一 一 vUv。 这 是 每 个 顶点 的 
纹理 坐标 ， 顶 点 着 色 器 向 片段 着 色 器 输出 这 个 值 (我 们 稍 后 将 会 看 到 ) ， 供 片段 着 色 器 后 
续 计算 使 用 。 这 个 着 色 器 还 允许 输入 一 个 缩放 参数 ， 用 来 控制 纹理 坐标 的 缩放 。 
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正如 之 前 提 到 的 ，GLSL 源 代码 嵌入 在 一 个 <script> 元 素 中 ， 因 此 我 们 可 以 在 没有 引号 和 
换行 符 这 类 干扰 的 情况 下 流畅 地 阅读 这 些 代码 。 这 里 的 诀 窑 在 于 我 们 使 用 了 一 个 不 同 的 脚 
本 类 型 标签 ， 在 这 个 例子 中 我 们 使 用 了 x-shader/x-vertex。 浏 览 器 无 法 识别 这 个 类 型 ， 我 
们 用 它 来 表明 这 不 是 一 个 JavaScript 语言 脚本 。 


例 5-10: 租 入 在 HTML<script> 元 素 中 的 顶点 着 色 器 代码 


<script id="vertexShader" type="x-shader/x-vertex"> 





uniform vec2 uvScale; 
varying vec2 vUv; 


void main() 


vUv = uvScale * uv; 
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); 
gl_Position = projectionMatrix * mvPosition; 


} 
</script> 


片段 着 色 器 代码 承担 了 大 部 分 的 工作 。 例 5-11 展示 了 这 段 代 码 。 在 定义 了 对 应 JavaScript 
中 参数 的 uniform 参数 之 后 ， 我 们 定义 了 一 个 varying 参数 一 一 vuv， 用 于 匹配 来 自 顶 点 着 
色 器 的 输出 。 

例 5-11: 基于 着 色 器 的 动画 中 的 片段 着 色 器 代码 


<script id="fragmentShader" type="x-shader/x-fragment"> 











uniform float time; 
uniform vec2 resolution; 


uniform float fogDensity; 
uniform vec3 fogColor; 


uniform sampLer2D texture1; 
uniform sampLer2D texture2; 


varying vec2 VvUv ; 








下 面 是 片段 着 色 器 的 主要 代码 。 它 的 要 点 在 于 texture1， 即 云 纹理 ， 它 被 用 作 噪 声 的 来 
源 ， 来 对 从 texture2 (熔岩 纹理 ) 获取 颜色 值 的 纹理 坐标 产生 轻微 扰动 。(GLSL 函数 
texture2D() 通过 一 个 给 定 的 2D 纹理 坐标 从 纹理 中 获取 颜色 数据 。) 通过 将 噪音 纹理 坐标 
和 当前 数值 相 乘 ， 并 加 入 一 些 赁 经 验 确定 的 偏 移 (例如 1.5, -1.5)， 我 们 可 以 得 到 流动 的 效 
果 。 像 素 点 的 颜色 值 最 后 被 保存 在 内 置 的 GLSL 变量 gl_FragColor 中 。 


void main( void ) { 












































vec2 position = -1.0 + 2.0 * vUvV; 


vec4 noise = texture2D( texture1，VvUv ); 
vec2 T1 = vUv + vec2( 1.5, -1.5 ) * time *0.02; 
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vec2 T2 = vUv + vec2( -0.5, 2.0 ) * time * 0.01; 


T1.x += noise. 
T1.y += noise. 
T2.x -= noise. 
T2.y += Noise. 


N<<= x 


XR A 效 浆 


float p = texture2D( texture1，T1 * 2.0 ).a; 


vec4 color = texture2D( texture2, T2 * 2.0 ); 
vec4 temp = color * ( vec4( p, p, p, Pp )*2.0 ) + 
( color * color - 0.1 ); 


if( temp.r > 1.0 ){ temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); } 
if( temp.g > 1.0 ){ temp.rb += temp.g - 1.0; 
if( temp.b > 1.0 ){ temp.rg += temp.b - 1.0; 


gl_FragColor = temp; 





到 这 里 ， 流 动 的 熔岩 效果 就 完成 了 。 然 而 ， 着 色 器 还 增加 了 一 个 雾 效 (fog effect)。 保 存在 
gl_FragColor 中 的 值 最 终 会 和 一 个 由 向 着 色 器 传人 的 fog 参数 计算 出 来 的 雾 效 值 混合 ， 得 
出 像素 最 终 的 颜色 值 ， 并 输出 到 内 置 的 GLSL 变量 gl_FragColor 中 。 到 这 里 ， 整 个 过 程 就 


结束 了 。 


最 后 ， 在 我 们 的 








float depth = gl_FragCoord.z / gl_FragCoord.w; 
const float LOG2 = 1.442695; 
float fogFactor = exp2( - fogDensity * fogDensity * depth * 
depth * LOG2 ); 
fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 ); 
gl_FragColor = mix( gl_FragColor, 
vec4( fogColor, gl_FragColor.w ), fogFactor ); 


</script> 


\ 一 ZX 一 


运作 





循环 中 通过 不 断 更 新 各 项 值 来 驱动 动画 。Three.js 让 这 项 工作 变 得 非 

















常 简单 ， 它 在 泻 染 器 每 次 更 新 时 都 自动 向 GLSL 着 色 器 传递 全 部 的 uniform 值 。 我 们 需要 


做 的 仅仅 是 在 JavaScript 代码 中 设置 这 些 属性 。 在 这 个 示例 中 ，render() 函数 在 每 个 动画 




















帧 执行 的 时 候 都 会 被 调用 。 注 意 用 粗 体 标 出 的 代码 行 。 





function render() { 
var delta = 5 * clock.getDelta(); 
uniforms.time.value += 0.2 * delta; 


mesh.rotation.y += 0.0125 * delta; 
mesh.rotation.x += 0.05 * delta; 


renderer .clear(); 
composer .render( 0.01 ); 





不 可 否认 ， 编 写 这 样 一 个 动画 需要 比较 高 的 艺术 水 平 。 我 们 不 仅仅 需要 学 习 详 细 的 GLSL 








语法 和 内 置 函 数 ， 还 需要 掌握 一 些 深奥 的 计算 机 医 














形 算法 。 但 是 如 果 你 有 这 方 画 








i 的 爱好 ， 





它 会 让 你 非常 有 成 就 感 。 互 联网 上 有 非常 多 的 信息 以 及 有 用 的 示例 ， 可 以 帮助 你 入 门 。 


5.9 小结 


正如 我 们 所 看 到 的 ， 在 WebGL 中 使 3D 内 容 动 起 来 的 方法 有 很 多 。 从 本 质 上 来 说 ， 这 些 
动画 由 新 的 浏览 器 函数 requestAnimationFrame() 来 驱动 ， 这 个 函数 使 得 用 户 可 以 在 整个 
页 面 中 进行 实时 同步 绘制 。 此 外 ， 为 了 驱动 动画 ， 我 们 有 从 简单 到 复杂 的 多 种 选择 ， 取 决 
于 想 要 实现 的 效果 。 内 容 可 以 通过 和 逐 帧 用 程序 修改 来 产生 动画 ， 也 可 以 使 用 一 些 数据 驱动 
的 方式 ， 如 补 间 、 关 键 帧 、 变 形 和 蒙 皮 。 我 们 可 以 通过 将 关键 帧 和 路 径 跟 踪 结 合 来 获得 更 
自然 的 运动 效果 。 我 们 还 可 以 使 用 着 色 器 来 在 GPU 中 进行 内 容 动画 ， 以 实现 更 多 的 可 能 。 
用 于 WebGL 动画 的 工具 和 库 都 在 持续 更 新 ， 并 没有 一 个 最 终 确定 的 选择 。 然 而 这 意味 着 
存在 许多 可 能 性 ， 也 意味 着 少 了 许多 障碍 ， 而 这 要 感谢 JavaScript 和 开源 。 
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前 几 童 展示 了 如 何 使 用 WebGL 来 创建 惊人 的 、 硬 件 加 速 演 染 的 3D 物体、 场景 和 动画 。 
尽管 WebGL 非常 强大 ， 但 在 本 书写 作 时 它 依然 存 在 一 个 基本 的 局 限 ， 那 就 是 你 不 能 将 任 
意 的 HTML 内 容 作为 一 个 纹理 映射 到 一 个 3D 物体 的 表面 。 如 果 你 希望 为 页 面 上 的 元 素 添 
加 我 们 在 前 几 章 中 看 到 的 3D 效果 ， 需 要 使 用 另 一 项 HTMLS5 的 新 技术 : CSS3。 


有 了 CSS3， 单 个 元 素 或 整个 页 面 都 可 以 通过 动画 、 图 片 滤 镜 ， 以 及 2D 或 3D 变换 变 得 生 
动 起 来 。 这 些 特 性 使 得 我 们 可 以 创建 各 种 各 样 用 于 简单 游戏 、 广 告 宣传 和 直观 用 户 界面 的 
3D 效果 。WebGL 至 少 需要 基本 的 3D 编程 知识 并 擎 担 一 个 如 Three.js 这 样 的 库 ， 而 相 比 
之 下 使 用 CSS3 则 只 需 了 解 标 签 、CSS 和 基本 的 JavaScript， 或 许 还 需要 像 jQuery 这 类 框 
架 的 一 点 辅助 。 这 让 CSS3 的 开发 比 WebGL 更 加 简单 ， 然 而 ， 开 发 者 只 能 访问 浏览 器 内 
置 的 特性 。 换 名 话说 ，3D CSS 以 牺牲 强大 和 灵活 性 来 换取 了 简单 易 用 。 


CSS3 的 3D 特性 源 于 Apple 最 初 为 其 核心 动画 框架 编写 的 3D 变换 ， 它 支持 了 如 iOS 天 
气 应 用 中 的 屏幕 转换 〈 如 图 6-1) 这 类 现今 流行 的 用 户 界 面 效果 。CSS3 中 的 3D 方案 最 
初 由 WebKit 开发 团队 在 2009 到 2010 年 间 提 出 ， 并 被 Apple 的 Safari 团队 首次 应 用 于 
市 场 ， 用 在 Mac OS 和 iOS 平台 上 。 这 些 特性 随后 被 Chrome 采用 ， 并 最 终 为 所 有 的 六 
览 器 厂商 采纳 。 
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6-1: iOS 天 气 应 用 中 的 屏幕 转换 


为 HTML 元 素 添 加 3D 效果 的 能 力 ， 为 Web 页 面 内 容 开 启 了 同样 的 可 能 性 。 图 6-2 展 
示 了 Snowstack， 一 个 由 Safari 团队 开发 的 演示 (http:/www.satine.org/research/webkit/ 
Snowleopard/snowstack.html) 。Snowstack 是 一 个 使 用 纯 HIML、3D CSS 和 JavaScript 创建 
的 照片 查看 视觉 效果 库 ， 它 用 于 以 透视 的 方式 演 染 一 个 Flickr 消息 队列 。 有 了 Snowstack， 
用 户 可 以 使 用 键盘 上 的 方向 键 来 控制 浏览 一 个 看 似 无 尽 的 照片 次 砖 墙 。 这 个 应 用 可 以 在 所 
有 的 浏览 器 和 设备 中 运行 。 虽 然 Snowstack 本 身 的 确 是 一 个 非常 有 技术 含量 的 演示 ， 但 它 
旨 在 使 用 3D CSS 来 对 海量 信息 进行 可 视 化 和 浏览 。 



























































6-2: Snowstack， 一 个 基于 CSS3 的 3D 照片 查看 器 

















许多 开发 者 为 创建 创新 的 Web 内 容 而 研究 3D CSS。 除 了 简单 地 为 平面 瓷砖 添加 变换 之 
外 ， 一 些 程序 员 想 出 了 如 何 用 这 项 技术 来 模拟 完整 的 3D 物体 ， 我 们 在 本 章 后 面 将 会 看 到 ， 
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有 人 甚至 大 胆 地 使 用 3D CSS 来 构建 了 一 个 第 一 人 称 射击 游戏 的 原型 ! 3D CSS 还 能 与 
WebGL 结合 使 用 ， 后 者 用 于 处 理 真实 的 3D 泻 染 任务 ， 而 前 者 用 于 覆盖 或 整合 用 户 界 面 的 
HTML 元 素 。 


CSS3 是 允许 往 页 面 元 素 上 添加 动态 效果 的 一 系列 标准 。 本 章 涵盖 了 多 种 用 于 创建 3D 效果 
的 CSS 技术 。 








。 CSS 变换 
作用 于 整个 元 素 的 3D 操作 (平移 、 旋 转 、 缩 放 ) 。 
。 CSS 过 渡 


随时 间 变 化 作用 于 CSS 属性 的 简单 变化 。 如 补 间 (在 上 一 章 讨 论 过 ) 一 样 ，CSS 过 渡 
非常 适合 用 于 一 次 性 的 效果 。 

。 CSS 动画 
随时 间作 用 于 CSS 属性 的 复杂 效果 ， 使 用 关键 帧 数据 。 


6.1 _ CSS 变换 


3D CSS 开发 的 核心 是 使 用 CSS 变换 来 操作 页 面 元 素 的 能 力 。CSS 变换 规范 (http://www. 
w3.org/TR/css3-transforms/) 代表 了 之 前 使 用 了 CSS 的 3D 和 2D 工作 在 改变 页 面 元 素 位 
置 、 旋 转 、 缩 放 以 及 其 他 外 观 属性 上 的 趋同 。 它 们 使 用 变换 操作 来 封 盖 这 些 属性 ， 而 非 简 
单 的 left/top 和 width/height 属性 。 


让 我 们 来 复习 一 下 ，3D 图 形 使 用 一 个 三 维 的 坐标 系统 ， 它 采用 了 第 三 个 坐标 轴 z= 来 表示 
离 屏 幕 位 置 的 远近 ， 据 此 创建 了 深度 的 观感 。 图 6-3 描绘 了 用 于 CSS 的 3D 坐标 系统 。 注 
意 ， 与 常规 的 3D 系统 不 同 ,y 轴 的 正方 向 向 下 而 不 是 向 上 。 这 是 为 了 和 Web 浏览 器 页 面 
和 窗口 坐标 系 中 使 用 的 2D xy 系统 保持 一 致 。 
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6-3: CSS 的 3D 坐标 系统 ,，y 轴 正 方向 指向 下 (改编 自 http:/bitlywikimedia-3d-coordinate; 
循 知识 共享 署名 - 相同 方式 共享 3.0 未 本 地 化 版 本 协议 使 用 ) 


可 





6.1.1 使 用 3D 变 换 


你 可 以 像 指 定 其 他 CSS 一 样 使 用 属性 来 指定 CSS 3D 变换 。CSS3 标准 中 定义 了 许多 用 于 
变换 元 素 的 属性 。 我 们 先 来 看 一 个 示例 。 图 6-4 描绘 了 被 赋予 不 同 变换 的 三 个 元 素 : 平移 、 
旋转 和 缩放 。 











CSS 3D 变 换 
缩放 





THis element ls scaled. 


Trensformed elements can contain | 
“ryihing: ext imeges, dlve, tables.. | 


This element is rotated 





This element is translated. 






Transformed elements can contain 
anything: lext, images, ivs, ables 














图 6-4: CSS3 


这 个 示例 的 源 代码 可 以 在 文件 Chapter 6/css3dtransforms.html 及 其 引用 的 CSS 文件 css/ 
css3dtransforms.css 中 找到 。 例 6-1 展示 了 定义 第 一 个 DIV 元 素 的 代码 片段 ， 它 被 赋予 了 一 
个 3D 变换 。 


例 6-1: 带 CSS 3D 变换 的 元 素 
<div id="card1" class="container perspective"> 
<div class="legend"> 
Translate 
</div> 
<div class="code">{translateX(20px) translateY(20px) translatez(-100px);}</div> 
<div class="cardBorder"> 
<div class="card translate"> 
<p>This element is translated.</p> 
<img width=96 height=96 src="../images/HTMLSrawkes.png"></img> 
<p>Transformed elements can contain anything: text, images, 
divs, tables...</p> 
</div> 
</div> 
</div> 


粗 体 字 表明 了 作用 于 中 间 的 DIV 元 素 的 两 个 类 : card 和 translate。card 类 定义 了 页 面 上 
三 个 “卡片 ”的 通用 属性 ， 例 如 实 线 边框 、 投 影 以 及 圆 角 。translate 类 定义 了 3D 变换 。 
例 6-2 展示 了 这 两 个 类 的 CSS 定义 ， 以 及 cardBorder， 后 者 用 于 定义 卡片 父 元 素 的 点 线 变 
量 ， 以 表明 没有 添加 变换 属性 的 元 素 的 原始 位 置 。 现 在 我 们 可 以 暂时 忽略 这 个 声明 中 的 - 
moz-transform-style 属性 。 它 们 的 作用 是 保证 这 些 特效 在 Firefox 浏览 器 中 也 可 以 正常 运 
行 ， 我 会 在 下 一 节 关 于 透视 的 讲述 中 详细 解释 这 个 属性 。 


例 6-2: 定义 了 一 个 平移 变换 的 CSS 


.CardBorder { 
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} 


position: absolute; 
width: 100%; 
height: 80%; 

top: 30%; 

border:1px dotted; 


border-radius:0 0 4px 4px; 
-moz-transform-style: preserve-3d; 


.card { 


3 


position: absolute; 
width: 99%; 

height: 99%; 
border:1px solid; 
border-radius: 4px; 


box-shadow: 2px 2px 2px; 
-moz-transform-style: preserve-3d; 


.translate { 


} 


-webkit-transform: 
-moz-transform: 
-0-transform: 
transform: 


translateX(20px) translateY(20px) translateZz(-100px); 
translateX(20px) translateY(20px) translateZz(-100px); 
translateX(20px) translateY(20px) translateZz(-100px); 
translateX(20px) translateY(20px) translatez(-100px); 


translate 类 通过 设置 它 的 transfornm 属性 来 指定 一 个 CSS 3D 变换 。 在 这 个 示例 中 ， 元 素 


在 x 和 ?方向 上 分 别 平 移 了 20 像素 ， 并 沿 = 轴 负 方向 移动 了 100 像素 (向 屏幕 内 侧 )。,， 


的 来 说 ， 你 可 以 使 用 transform， 通 过 将 以 下 一 个 或 多 个 变换 方法 (transform method) 作 











所 


[oy 


用 于 元 素来 创建 变换 。 除 了 平移 ，CSS 还 支持 旋转 和 缩放 ， 任 意 的 矩阵 变换 ， 以 及 透视 投 
影 。CSS 3D 变换 方法 如 表 6-1 所 示 。 


表 6-1: CSS 3D 变 换 方 法 








大 描 述 
translateXx(x) 沿 x 轴 平 移 
translateY(y) 沿 y 轴 平 移 
translatez(z) 沿 z 轴 平 移 
translate3d(x,y,z) 沿 x、y、z 三 轴 平 移 
rotateX(angle) 线 x 轴 旋 转 
rotateY(angle) 绕 y 轴 旋 转 
rotatez(angle) 绕 z 轴 旋 转 


rotate3d(x,y,z,angle) 


scaleX(x) 


scaleY(y) 


scalez(z) 


scale3d(x,y,z) 


matirx3d(...) 


perspective(depth) 


绕 x、y、z 三 轴 旋 转 


沿 x 轴 缩 
沿 y 轴 缩 


沿 z 轴 缩 














沿 x、y、z 三 轴 缩 放 


用 16 个 数值 定义 任意 的 4x4 变换 矩阵 


定义 透视 


投影 


的 深 





度 像素 值 
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第 二 个 和 第 三 个 卡片 以 类 似 的 方式 进行 变换 ， 通 过 使 用 CSS 中 定义 的 rotate 和 scate 类 : 


.rotate { 


-webkit-transform: 
-moz-transform: 
-transform: 
transform: 


! 
[© 


} 


.scale { 


-webkit-transform: 
-moz-transform: 
-transform: 
transform: 


! 
[© 


} 
旋转 值 可 以 被 指定 为 角度 、 


rotateY(30deg); 
rotateY(30deg); 
rotateY(30deg); 
rotateY(30deg); 


scaleX(1.25) scaleY(.75); 
scaleX(1.25) scaleY(.75); 
scaleX(1.25) scaleY(.75); 
scaleX(1.25) scaleY(.75); 


弧度 或 百 分 度 (gradian， 圆 周 的 1/400)， 例 如 90deg、1.57rad 





或 199grad。 缩 放 值 是 用 于 乘 在 每 个 轴 上 的 标量 〈 即 一 个 设 有 进行 过 缩放 的 元 素 在 每 个 轴 


上 的 缩放 值 都 是 1) 。 


特性 来 支持 。 





到 厌烦 ， 那 么 


lesscss.org/) ， 


注意 浏览 器 私有 前 缀 在 CSS 中 的 使 用 〈 例 如 -webkit-transform)。 这 对 跨 
浏览 器 支持 是 必要 的 ， 因 为 CSS 变换 在 好 几 年 的 时 间 里 都 被 作为 实验 性 的 














这 真 麻烦 ， 但 许多 CSS 特性 都 需要 通过 这 样 添 加 前 级 的 方式 





来 使 用 ， 而 开发 者 们 也 已 经 习惯 了 处 理 它们 。 如 果 你 对 这 些 重 复 的 工作 感 





可 能 需要 一 个 可 以 自动 生成 样式 表 的 工具 ， 例 如 LESS (http:/ 
来 使 得 这 项 工作 不 那么 痛苦 。 偶 尔 为 了 简洁 ， 在 我 们 的 示例 中 





我 会 省 略 掉 这 些 浏 览 器 私有 前 级 ， 但 请 务必 确保 在 你 的 代码 中 使 用 它们 。 


CSS 支持 一 个 额外 的 属性 ， 





transform-origin， 这 个 属性 允许 开发 者 指定 变换 的 原点 。 这 





个 属性 的 默认 值 是 56% 56% 0， 即 坐标 系 的 中 心 点 。 通 过 改变 这 个 属性 ， 你 可 以 让 物体 

















围绕 非 中 心 点 旋转 。transform-origin 可 以 使 用 任意 的 CSS 偏 移 单 位 来 指定 ， 如 Left、 








center、right、%， 或 者 一 个 CSS 距离 值 (像素 、 英 寸 、em 空间 ， 等 等 ) 。 


6.1.2 添加 透视 





你 应 该 已 经 注意 到 ， 在 上 男 











[的 示例 中 类 perspective 作用 于 每 个 顶层 DIV 元 素 。 无 论 使 不 





使 用 透视 投影 ， 你 都 可 以 应 用 CSS 3D 变换 ， 尽 管 使 用 透视 投影 会 使 得 效果 看 起 来 更 令 人 





例 6-3: CSS 透视 属性 


.perspective { 


在 CSS3 中 定义 透视 投影 非常 简单 。 例 6-3 展示 了 用 于 定义 透视 的 CSS。 


-webkit-perspective: 400px; 
-moz-perspective: 400px; 
-0-perspective: 400px; 
perspective: 400px; 
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.noperspective { 
-webkit-perspective: 0px; 
-moz-perspective: 0px; 
-0-perspective: Opx; 
perspective: 0px; 


我 们 定义 了 一 个 CSS 类 一 一 perspective， 来 用 于 我 们 希望 应 用 透视 投影 的 元 素 。 我 们 
提供 的 值 代表 从 视 口 平面 到 xy 平 面 (z=9) 的 距离 。 透 视 可 以 使 用 任意 的 CSS 距离 单 
位 来 定义 : 像素 、 点 、 英 寸 . em 空间， 等 等 。 这 个 CSS 文件 还 定义 了 另 一 个 类 一 一 
noperspective， 用 于 清除 元 素 上 原先 可 能 带 有 的 透视 。 这 个 类 中 的 透视 值 被 设 为 默认 值 0。 
尽管 CSS 透视 的 细节 和 WebGL 中 的 透视 并 不 相同 ， 但 它们 的 概念 是 一 臻 
的 。 如 果 你 需要 重 温 一 下 这 方面 的 知识 ， 请 翻 回 到 第 1 章 ， 那 里 有 详细 的 
讨论 。 























为 了 更 好 地 展现 添加 了 透视 和 没有 添加 透视 的 元 素 的 区 别 ， 让 我 们 来 看 一 个 例子 。 打 开 示 
例文 件 Chapter 6/css3dperspective.html。 你 会 看 到 两 个 卡片 。 左 边 的 卡片 添加 了 透视 ， 而 右 
边 的 没有 。 两 者 之 间 的 唯一 区 别 在 于 是 否 使 用 了 CSS perspective 属性 ， 两 个 卡片 都 围绕 
了 轴 旋 转 了 30 度 。 然 而 ， 在 没有 使 用 透视 的 情况 下 ， 右 边 的 元 素 看 起 来 仅仅 是 在 水 平方 向 
上 被 压 遍 了， 而 不 是 旋转 。 如 图 6-5 所 示 。 





























CSS 3D 变 换 -透视 





此 元 素 没有 添加 透视 


此 元 素 添 加 了 透视 

















6-5: CSS 变换 和 透视 一 一 左边 的 元 素 有 透视 ， 右 边 的 元 素 则 没有 (HTML5 Rawkes Logo 由 Phil 
Banks 提供 ) 


你 还 可 以 使 用 表 6-1 中 描述 的 perspective() 变换 函数 将 透视 应 用 于 元 素 。 然 而 ， 在 实际 
应 用 中 ， 你 最 好 还 是 使 用 两 个 不 同 的 属性 来 分 别 表示 透视 值 和 变换 值 。 否 则 ， 在 每 次 改变 
其 他 变换 函数 值 的 时 候 ， 你 可 能 都 需要 重新 将 透视 值 应 用 到 元 素 上 。 








6.1.3 创建 变换 层级 


CSS 3 允许 3D 变换 通过 DOM 对 象 层 级 继承 。 一 个 带 3D 变换 的 元 素 可 以 选择 继承 或 不 继 
承 其 祖先 元 素 的 变换 ， 具 体 取决 于 transform-style 属性 的 值 。 


图 6-6 描绘 了 transform-style 是 如 何 用 于 创建 一 个 变换 层级 的 。 每 个 卡片 (card) 元 
素 都 围绕 y 轴 旋 转 了 30 度 。 每 个 卡片 都 有 一 个 独立 围绕 y 轴 旋 转 了 30 度 的 子 卡 片 
(childcard)。 注 意 左边 的 子 卡 片 距 它 的 父 元 素平 面 旋转 了 30 度 ， 而 右边 的 子 卡 片 与 它 的 
父 元 素 处 于 同一 平面 上 。 























CSS 3D 变 换 - 层 级 














图 6-6: 使 用 CSS 创建 3D 变换 层级 


示例 代码 可 以 在 文件 Chapter 6/css3dhierarchy.html 和 css/css3dhierarchy.css 中 找到 。HTML 
DOM 元 素 层级 ， 唯 一 的 区 别 在 于 第 一 个 卡片 使 用 了 hierarchy 类 ， 
第 二 个 使 用 了 另 一 个 叫 nohierarchy 的 类 。 


<div id="hierarchy1" class="container perspective"> 
<div class="legend"> 
With Hierarchy 
</div> 
<div class="code">{transform-style: preserve-3d;}</div> 
<div class="cardBorder"> 
<div class="card hierarchy rotate "> 
<p>This element is a parent.</p> 
<img width=96 height=96 src="../images/HTMLSrawkes.png"></img> 
<p></p> 
<div class="childCard rotate"> 
<div class="code">{rotateY(30deg);}</div> 
<p>This element is a child.</p> 
</div> 
</div> 
</div> 
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</div> 


<div id="hierarchy2" class="container perspective"> 


<div class="legend"> 
Without Hierarchy 
</div> 


<div class="code">{transform-style: flat;}</div> 


<div class="cardBorder"> 


<div class="card nohierarchy rotate"> 


<p>This element is a parent.</p> 


<img width=96 height=96 src=". 


<p></p> 


<div class="childCard rotate"> 
<div class="code">{rotateY(30deg);}</div> 


<p>This element is a child.</p> 


</div> 
</div> 
</div> 
</div> 


类 hierarchy 和 nohierarchy 的 CSS 定义 如 下 : 


.hierarchy { 


-webkit-transform-style: 
-moz-transform-style: 
-0-transform-style: 
transform-style: 


.Nohierarchy { 


-webkit-transform-style: 
-moz-transform-style: 
-0-transform-style: 
transform-style: 


3 


transform-style 属性 接受 两 个 值 : 
父 元 素 的 变换 ，preserve-3d4， 这 个 值 会 





preserve-3d; 
preserve-3d; 
preserve-3d; 
preserve-3d; 


flat; 
flat; 
flat; 
flat; 


flat (默认 )， 





./images/HTMLSrawkes.png"></img> 


个 值 指定 了 后 代 DOM 元 素 不 会 应 用 


洛 诉 济 临 吕 将 上 级 元 素 的 变 按 应 用 于 后 代 元 素 。 通 











过 在 整个 应 用 中 使 用 preserve-3D， 应 用 可 以 创建 一 个 3D 物体 的 深度 层级 ， 尤 其 在 结合 了 


本 章 所 述 的 另外 两 项 技术 的 情况 下 。 


浏览 器 兼容 性 警告 :在 本 节 的 第 


cardBorder 的 CSS 类 定义 中 的 一 个 细节 


-moz-transform-style: 





一 个 示例 中 ， 我 们 一 笔 带 过 





了 card 和 














preserve-3d; 


它们 都 包含 如 下 语句 : 


显然 Firefox 浏览 器 并 不 像 基 于 WebKit 的 浏览 器 那样 将 transform-style 属 


性 层 层 传播 下 去 。 你 必须 为 每 一 


素 的 变换 会 失效 ， 


transform-style 属性 者 


IE10 就 完全 不 支持 这 











了 设 为 preserve-3d。 


这 种 情况 最 坏 的 部 分 在 于 每 个 浏 


| 览 Ba 


俐 部 嫩 


个 后 代 元 素 显 式 地 指定 它 ， 否 则 不 仅 子 元 
透视 也 被 禁用 了 。 解 决 方案 是 将 DOM 层级 中 每 个 后 代 的 
这 虽然 很 麻烦 ,但 是 必要 的 。 


对 这 个 语句 的 解释 都 不 尽 相 同 。 显 
文 个 特性 ， 不 过 正 11 中 会 增加 对 它 的 支持 。 





6.1.4 控制 背面 演 染 

在 传统 的 3D 滨 染 中， 当 一 个 多 边 形 背 向 观察 者 时 ， 浑 染 系 统 可 以 选择 显示 或 不 显示 该 多 
边 形 的 背面 (backface) ， 这 取决 于 开发 者 的 设置 。CSS3 变换 同样 提供 了 这 项 能 力 。 如 果 
一 个 元 素 旋转 至 背面 朝 前 ， 它 会 基于 backface-visibility 变换 属性 来 决定 是 否 显示 。 
CSS3 背面 泻 染 对 于 构建 双 面 物体 非常 重要 。 假 设 我 们 想 要 创建 一 个 类 似 图 6-1 描绘 的 iOS 
天 气 应 用 中 的 屏幕 翻转 过 渡 效 果 。 那 么 创建 这 样 一 个 效果 ， 需 要 我 们 小 心地 组 织 标签 ， 以 
及 正确 地 应 用 backface-visibility。 图 6-7 描绘 了 在 实际 中 如 何 使 用 这 项 技术 。 



































CSS 3D 变 换 -背面 可 见 


单 面 ， 可 见 单 面 ， 隐 藏 





双 面 ， 可 见 双 面 ， 隐 藏 














图 6-7: 使 用 背面 可 见 属 性 来 创建 双 面 物体 


打开 文件 Chapter 6/css3dbackfaces.html 来 实际 观看 背面 演 染 的 效果 。 页 面 上 有 四 个 卡片 。 
上 面 一 行 是 两 个 单 面 的 卡片 ， 分 别 以 背面 可 见 和 背面 不 可 见 的 模式 泻 染 。 左 上 的 卡片 旋转 
到 背 对 观察 者 的 角度 ， 并 以 背面 可 见 的 方式 泻 染 ， 右 上 的 卡片 旋转 到 背 对 观察 者 的 角度 ， 
并 以 背面 不 可 见 的 方式 泻 染 。 注 意 ， 我 们 可 以 看 到 左上 的 卡片 ， 但 文字 “FRONT” 是 反 过 
来 的 ， 而 右上 的 卡片 不 可 见 。 


在 下 面 一 行 我 们 可 以 看 到 两 个 双 面 的 卡片 ， 同 样 分 别 以 背面 可 见 和 不 可 见 的 方式 泻 染 。 
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两 个 物体 同样 被 旋转 到 背 对 观察 者 的 角度 。 然 而 ， 这 两 个 卡片 都 定义 了 一 个 包含 文字 
“BACK” 的 额外 元 素 ， 用 来 转向 观察 者 ， 以 模拟 双 面 的 物体 。 左 下 的 卡片 开启 了 背面 可 
见 ， 并 设置 了 一 个 0.8 的 透明 度 值 ， 所 以 我 们 可 以 透 过 表面 看 到 翻转 的 文字 “FRONT 。 
相反 ， 右 下 的 卡片 关闭 了 背面 可 见 ， 因 此 卡片 背 对 观察 者 的 一 面 (FRONT” 面 ) 被 隐藏 
了 。 右 下 的 卡片 展示 了 用 于 模拟 双 面 物体 的 正确 技术 ， 让 我 们 来 看 看 它 的 代码 。 


例 6-4 展示 了 这 个 页 面 的 HTML 代码 。 背 面 可 见 的 元 素 通过 backface 类 来 定义 ， 背 面 隐 
藏 的 元 素 通 过 nobackface 类 来 定义 。 为 了 创建 下 面 一 行 的 双 面 卡片 ， 我 们 实际 上 需要 创建 
两 个 卡片 元 素 : 分 别 用 于 正面 和 背面 。 右 下 的 卡片 通过 将 nobackface 类 和 其 他 类 组 合 起 
来 ， 创 建 了 一 个 无 论 哪 一 面 朝向 观察 者 都 可 以 正常 显示 的 卡片 。 


例 6-4: 构建 一 个 双 面 的 HTML 元 素 
<div id="backface1" class="container perspective "> 
<div class="legend"> 
One-Sided, Visible 
</div> 
<div class="code">{backface-visibility: visible;}</div> 
<div class="cardBorder"> 
<div class="card backface frontside"> 
FRONT 
</div> 
</div> 
</div> 


























































































































<div id="backface2" class="container perspective "> 
<div class="legend"> 
One-Sided, Hidden 
</div> 
<div class="code">{backface-visibility: hidden;}</div> 
<div class="cardBorder"> 
<div class="card nobackface frontside"> 
FRONT 
</div> 
</div> 
</div> 
<div id="backface3" class="container perspective "> 
<div class="legend"> 
Two-Sided, Visible 
</div> 
<div class="code">{backface-visibility: visible;}</div> 
<div class="cardBorder"> 
<div class="card backface frontside"> 
FRONT 
</div> 
<div class="card backface backside"> 
BACK 
</div> 
</div> 
</div> 
<div id="backface4" class="container perspective "> 
<div class="legend"> 





Two-Sided, Hidden 
</div> 


<div class="code">{backface-visibility: hidden;}</div> 
<div class="cardBorder"> 
<div class="card nobackface frontside"> 


FRONT 
</div> 


<div class="card nobackface backside"> 


BACK 
</div> 
</div> 
</div> 


例 6-5 展示 了 文件 css/css3dbackfaces.css 中 的 样式 声明 。 首 先 ， 我们 定义 了 看 起 来 可 能 
些 违反 直觉 的 frontside 和 backside 类 。frontside 用 于 定义 卡片 的 正面 ， 不 过 这 个 示例 
是 为 了 说 明 背 面 的 泻 染 规则 ， 所 以 我 们 让 卡片 绕 y 轴 旋 转 210 度 来 使 得 其 背面 朝向 观察 








者 。 相 对 ， 卡 片 的 彰 








面相 对 观察 者 有 一 个 30 度 的 旋 角 。 由 于 旋转 角度 恰好 相差 180 度 ， 











所 以 卡片 的 双 面 看 起 来 是 受 在 一 起 的 。 结 合用 于 隐藏 背面 的 nobackface 类 ， 我 们 得 到 了 一 























个 如 右 下 卡片 的 完美 双 面 卡片 。nobackface 类 将 backface-visibility 属性 设置 为 htdden， 

















以 得 到 期 望 的 效果 。 














例 6-5: 用 于 创建 双 面 物体 的 CSS 声明 


.frontside { 


-webkit-transform: 
-moz-transform: 
-0o-transform: 
transform: 


rotateY(210deg); 
rotateY(210deg); 
rotateY(210deg); 
rotateY(210deg); 


line-height:160px; 


font-size 


:40px; 


color:White; 
background-color:DarkCyan; 
border-color:Black; 
box-shadow:2px 2px 2px Black; 


} 


.backside { 


-webkit-transform: 
-moz-transform: 
-0-transform: 
transform: 


rotateY(30deg); 
rotateY(30deg); 
rotateY(30deg); 
rotateY(30deg); 


line-height:160px; 


font-size 


:40px; 


color:White; 
background-color:DarkRed; 
border-color:Black; 
box-shadow:2px 2px 2px Black; 


opacity:0 


} 


.backface { 


0 


-webkit-backface-visibility: visible; 
-moz-backface-visibility: visible; 
-0-backface-visibility: visible; 
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backface-visibility: visible; 


3 


.nobackface { 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-0-backface-visibility: hidden; 
backface-visibility: hidden; 


} 


6.1.5 ”CSS 变换 属性 汇总 
本 节 池 盖 CSS 提供 的 用 于 为 HTML 元 素 添 加 3D 效果 的 变换 属性 。 表 6-2 对 这 些 属性 进行 
表 6-2: CSS 变 损 属 性 















































属 性 描 述 

transform 使 用 一 个 或 多 个 方法 来 提供 变换 ( 见 表 6-1) 
transform-origin 指定 所 有 变换 的 原点 (默认 : 50%, 50%, 0) 

perspective 指定 用 CSS 距离 单位 表示 的 透视 深度 (默认 : 0 = 无 透视 ) 
perspective-origin 指定 xy 坐标 系 中 透视 的 消失 点 

transform-style 指定 一 个 3D 元 素 的 后 代 元 素 是 以 平面 还 是 3D 模式 演 染 
backface-visibility 指定 一 个 背 对 屏幕 的 3D 元 素 是 否 被 演 染 








正如 我 们 看 到 的 那样 ，CSS 变换 提供 了 一 个 为 页 面 元 素 添 加 3D 效果 的 强大 途径 。CSS 变 
换 在 结合 过 渡 和 动画 来 创建 动态 效果 的 时 候 会 更 加 强大 。 


本 节 中 的 示例 得 到 了 David DeSandro 的 著名 博客 站 点 “24 Ways”( 例 如 ， 打 
动 你 朋友 的 24 种 方法 ) 的 大 力 支持 。David 慷慨 地 允许 我 对 他 的 工作 成 果 进 
行 改编 。 参 考 他 网 站 上 的 示例 以 及 其 他 文章 ， 了 解 更 多 关于 CSS 3D 的 信息 。 











6.2 ” CSS 过渡 


CSS 过 渡 允 许 属性 随时 间 渐 进 地 变化 。CSS 过 渡 非 常 类 似 于 我 们 在 上 一 章 中 看 到 过 的 
Tweenjs 的 补 间 。 然 而 ， 这 些 效果 是 浏览 器 内 置 的 ， 不 需要 任何 辅助 性 的 JavaScript 库 。 
CSS 过 渡 还 可 以 用 于 多 数 的 CSS 属性 动画 : width、Pposition、color、z-index、opacity 等 ， 
但 这 里 我 们 的 关注 点 在 于 使 用 CSS 来 实现 3D 属性 的 动画 。 
基本 的 CSS 过 渡 语 法 如 下 : 

transition : property-name duration timing-function delay-time; 
各 项 属性 的 含义 如 下 。 
。 property-name 


过 渡 应 用 的 属性 名 称 ， 关 键 字 atl 表示 过 渡 将 应 用 于 全 部 产生 变化 的 属性 ， 而 关键 字 



































none 表示 过 渡 将 不 应 用 于 任何 属性 。 
。 duration 

以 秒 或 毫秒 为 单位 的 时 间 值 ， 指 定 过 渡 时 长 。 
。 timing-function 

用 于 过 渡 动 画 的 补 间 函 数 名 。 它 可 以 是 linear、ease、ease-in、ease-out、ease-in- 

out 或 cubic-bezier 中 的 任意 一 种 。 
。 delay-time 

指定 过 渡 开 始 之 前 等 待 的 时 间 长 度 (以 秒 或 毫秒 为 单位 )。 
transitton 实际 上 是 四 个 独立 的 CSS 属性 的 简写 ， 这 四 个 属性 分 别 是 transitton- 
property、transition-duration、transition-timing-function 和 transition-delay。 让 我 
们 通过 一 个 示例 来 看 看 它们 是 如 何 工作 的 。 打 开 文 件 Chapter 6/css3dtransitions.html， 如 图 
6-8 所 示 。 我 们 可 以 看 到 两 个 卡片 。 点 击 其 中 任意 一 个 可 以 将 其 翻转 到 另 一 面 ， 这 里 使 用 
了 上 一 市 介绍 的 双 面 技术 。 翻 转 过 渡 持 续 了 两 秒 的 时 间 ， 伴 随 轻 微 的 渐 入 渐 出 。 卡 片 的 颜 
色 也 同时 由 原本 的 瞳 青色 (DarkCyan) 变 为 金黄 色 (Goldenrod)。 然 而 ， 左 边 的 卡片 颜色 
随 着 翻转 过 程 而 变化 ， 而 右边 的 卡片 颜色 则 在 翻转 结束 后 才 改 变 。 




















ICSS 3D 过 渡 
点 击 以 翻转 卡片 


所 有 属性 














图 6-8: 使 用 CSS 过 渡 来 进行 属性 动画 ( 另 见 彩 插图 6-8) 


下 面 的 HTML 代码 用 类 似 的 方式 定义 了 每 个 卡片 的 正面 和 背面 。 两 个 卡片 的 主 
要 区 别 在 于 左边 的 卡片 使 用 了 CSS 类 easeALL2sec 而 右边 的 卡片 使 用 了 CSS 类 
easeTransform2secColor5secDelay。 我 们 稍 后 将 会 看 到 这 两 个 类 的 代码 。 


<div id="transition1" class="container perspective "> 
<div class="legend"> 
ALL Properties 
</div> 
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<div class="code">transition:all 2s;</div> 
<div class="cardBorder"> 
<div id="front1" 
class="card nobackface frontside clickable easeAll2sec"> 
FRONT 
</div> 
<div id="back1" 
class="card nobackface backside clickable easeAll2sec"> 
BACK 
</div> 
</div> 
</div> 
<div id="transition2" class="container perspective "> 
<div class="legend"> 
Individual Properties 
</div> 
<div class="code">transition:transform 2s, 
background-color 5s linear 2s;</div> 
<div class="cardBorder"> 
<div id="front2" 
class="card nobackface frontside clickable easeTransform2secCoLor5secDeLay"> 
FRONT 
</div> 
<div id="back2" 
class="card nobackface backside clickable easeTransform2secCoLor5secDeLay"> 









































BACK 
</div> 
</div> 
</div> 
效果 由 鼠标 点 击 事件 来 驱动 。 我 们 用 jQuery 来 为 每 个 卡片 的 正面 和 背面 添加 点 击 响应 处 
理 程序 。 它 使 用 一 个 布尔 值 来 追踪 卡片 当前 显示 的 是 哪 一 面 ， 并 根据 需要 添加 或 移 除 flip 





和 goGold 类 。flip 使 卡片 旋转 了 180 度 ，goGold 将 颜色 设置 为 金黄 色 (Goldenrod)。 如 
没有 设置 CSS 过 渡 ， 这 些 变 化 会 立即 生效 , 但 有 了 过 渡 之 后 ， 它 们 就 会 从 一 个 状态 随时 间 





平滑 地 变化 到 另 一 个 状态 。 


<script type="text/javascript"> 


var front1 = true; 
var front2 = true; 
$(document).ready( 
function() { 
$('#transition1 .clickable').click(function(){ 

// alert("Clicked"); 

if (front1) 

{ 
$('#front1').addClass('flip'); 
$s('#back1').addClass('flip'); 
$('#front1').addClass('goGold'); 
$s('#back1' ).addClass('goGold'); 














个 








$('#front1').removeClass('flip'); 

S('#back1' ) .removeCLass('fLip ' ); 

$('#front1').removeClass('goGold'); 

$('#back1').removeClass('goGold'); 
} 


front1 = !front1; 
]); 


$('#transition2 .CLickabLe' ).cLick(function(){ 
if (front2) 


{ 
$('#front2').addClass('flip'); 
$s('#back2').addClass('flip'); 
$('#front2').addClass('goGold'); 
$('#back2').addClass('goGold'); 

} 

else 

{ 
$('#front2').removeClass('flip'); 
$('#back2').removeClass('flip'); 
$('#front2').removeClass('goGold'); 
$('#back2').removeClass('goGold'); 

} 

front2 = !front2; 

]); 
} 
); 
</script> 


这 个 示例 的 CSS 代码 可 以 在 文件 css/css3dtransitions.css 中 找到 ， 例 6-6 列 出 了 这 些 代码 。 


卡片 的 正面 和 背面 由 类 frontside 和 backside 中 定义 的 不 同 旋转 角度 来 确定 ， 结 合 类 
flip， 它 们 通过 旋转 180 度 来 翻转 卡片 。goGold 类 用 以 变换 元 素 背 景 颜色 为 金黄 色 。 用 粗 
体 标 出 的 两 个 类 定义 了 两 个 不 同 的 过 渡 。easeALL2sec 非常 简单 : 它 为 所 有 变化 的 属性 添 
加 了 一 个 包含 轻微 浙 入 渐 出 (使 用 默认 的 ease 值 )、 时 长 为 两 秒 的 过 渡 。 


easeTransform2secColor5secDelay 则 复杂 一 些 。 它 实际 上 包含 两 个 过 渡 ， 一 个 用 于 变换 而 
男 一 个 用 于 背景 色 ， 它 们 用 逗号 隐 开 。 变 换 的 过 渡 与 easeALL2Sec 中 的 完全 相同 ， 是 一 个 
包含 轻微 渐 入 渐 出 的 两 秒 时 长 的 过 渡 。 背 景 颜色 的 过 渡 则 完全 不 同 ; 它 是 一 个 在 两 秒 钟 的 
停留 之 后 才 开 始 执行 的 、 持 续 5 秒 的 线性 颜色 插值 ， 使 用 了 过 渡 属 性 (transition) 的 第 
四 个 参数 ，delay time。 


例 6-6: 定义 CSS 过 渡 
.frontside { 
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
-0-transform: rotateY(0deg); 
transform: rotateY(0deg); 
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.backside { 
-webkit-transform: rotateY(180deg ) ; 
-moz-transform: rotateY(180deg ) ; 
-0-transform: rotateY(180deg ) ; 
transform: rotateY(180deg) ; 


.frontside.flip { 
-webkit-transform: rotateY(-180deg); 
-moz-transform: rotateY(-180deg); 
-0-transform: rotateY(-180deg); 
transform: rotateY(-180deg); 


.backside.flip { 
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
-0-transform: rotateY(Qdeg); 
transform: rotateY(0deg); 


} 


.goGold { 
background-color :Goldenrod; 


} 


.easeAll2sec { 
-webkit-transition:all 2s; 
-moz-transition:all 2s; 
-0-transition:all 2s; 
transition:all 2s; 


} 


.easeTransform2secCoLor5secDeLay { 
-webkit-transition:-webkit-transform 2s, background-color 5s linear 2s; 
-moz-transition:-moz-transform 2s, background-color 5s Linear 2s; 
-0-transition:-o-transform 2s, background-color 5s Linear 2s; 
transition:transform 2s, background-color 5s Linear 2s; 


本 节 仅 仅 涉及 了 CSS 过渡 的 一 点 皮毛 。 在 Microsoft CSS 开发 专家 Kirupa 
Chinnathambi 的 博客 上 (http://www.kirupa.com/html5/all_about_css_transitions. 
htm) ， 有 一 篇 关于 这 个 属性 的 优秀 文章 。 














过 渡 是 一 个 用 来 创建 效果 的 简单 方法 ， 但 仅 限于 创建 简单 的 单 次 效果 。 如 果 我 们 想 要 创建 
复杂 的 队列 和 循环 ， 那 么 需要 使 用 另 一 项 CSS3 技术 : CSS 动画。 





6.3 ”CSS 动画 


CSS 动画 提供 了 一 个 比 CSS 过 渡 更 为 全 面 的 动画 方案 。 像 上 一 章 介绍 的 3D 关键 帧 动画 一 
样 ，CSS 动画 利用 一 系列 关键 帧 和 属性 来 控制 动画 时 长 、 缓 动 国 数 、 延 时 以 及 循环 。 让 我 
们 来 看 看 一 些 示例 。 

打开 文件 Chapter 6/css3danimations.html。 你 会 看 到 三 个 卡片 。 点 击 它们 来 触发 不 同 的 动画 
(图 6-9)。 左 上 的 卡片 进行 了 一 个 简单 的 围绕 y 轴 旋 转 的 单 次 动画 。 右 上 的 卡片 重复 进行 
左右 晃动 的 动画 。 下 方 的 卡片 “ 飞 ” 起 来 并 向 右 移 动 ， 在 移动 过 程 中 始终 围绕 y 轴 旋 转 。 












































CSS 3D 动 画 
点 击 以 触发 动画 





旋转 (一 次 ) 晃动 〈 重 复 ) 





飞 起 来 〈 正 反 向 交 蔡 ) 











图 6-9: CSS 3D 动画 





用 于 创建 动画 的 CSS 分 为 两 个 部 分 : 一 个 用 于 创建 关键 帧 数据 的 CSS 代码 块 的 ekeyframe 
规则 ， 以 及 可 定义 于 单个 元 素 上 的 许多 属性 。 
。 animation-name 
一 个 由 @keyframe 规则 定义 的 关键 帧 集合 的 名 字 ， 用 于 作为 关键 帧 数据 的 源 。 
。 animation-duration 
指定 动画 的 时 长 ， 以 秒 或 毫秒 为 单位 。 
。 animation-timing-function 
关键 帧 动画 的 缓 动 国 数 名 称 ， 可 以 是 linear、ease、ease-in、ease-out、ease-in-out 
或 cubic-bezier 中 的 任意 一 个 。 
。 animation-delay 


指定 动画 开始 前 等 待 的 一 段 时 间 〈 以 秒 或 毫秒 为 单位 )。 
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。 animation-iteration-count 
指定 动画 播放 的 次 数 。 默 认为 1。 
。 animation-direction 
决定 动画 是 正 向 、 
向 )、alternate ( 正 反 向 交替 )， 











反 向 还 是 正 反 向 交替 播放 。 可 选 的 值 有 normal ( 正 向 )、 
以 及 alternate-reverse ( 正 反 向 交替 ， 先 反 向 播放 ) 。 


关键 字 infinite 用 于 定义 永久 循环 的 动画 。 





reverse ( 反 














我 们 可 以 用 CSS 属性 简写 animation 将 前 面 所 有 的 属性 像 下 面 这 样 结合 起 来 : 


animation: 


6-9 对 应 示例 的 CSS 代码 可 以 在 文件 css/css3danimations.css 中 找到 。 














name duration timing-function deLay iteration-count direction; 


例 6-7 的 摘录 展示 


了 其 中 的 重要 片段 。 我 们 使 用 @keyframe 规则 kfRotateY 和 kfRotateMinusyY 来 设置 关键 帧 








(分 别 用 于 卡片 从 正面 到 背面 以 及 从 背面 到 正面 的 旋转 )， 

















kfshake 用 于 晃动 的 动画 ，kfFLy 





用 于 飞翔 的 动画 。 我 们 为 每 个 动画 分 别 定义 了 不 同 的 类 ， 使 用 了 不 同 的 参数 。 
首 转 的 无 限 线性 插值 动画 。3 
单 的 表示 从 开始 状态 到 结束 状态 的 关键 帧 数据 来 定义 。 


它 使 用 了 分 别 位 于 0%、 
z 轴 的 旋转 。 最 后 ，kfFly 类 更 为 复杂 ， 





和 animRotateMinusy 类 定义 了 让 元 素 绕 y 轴 访 





kfshake 类 则 更 复杂 一 些 : 
数据 ， 来 定义 x 和 ?了 方向 上 的 平移 ， 以 及 围绕 





animRotateY 
这 些 动画 都 通过 简 

















50% 和 100% 时 刻 的 四 个 关键 帧 
它 在 


25%、 








关键 帧 中 定义 了 一 

















觉 效果 ， 是 因为 元 素 被 点 击 时 添加 在 元 素 正 面 / 背 
类 。 因 此 ， 实 际 上 底部 的 卡片 应 用 了 斤 套 动画 。 


例 6-7: 创建 关键 帧 动画 的 CSS 声明 


@-webkit-keyframes kfRotateY { 








from { 
-webkit-transform: rotateY(0deg); 
4 
to { 
-webkit-transform: rotateY(360deg); 
} 
} 
.animRotateY 
{ 


-webkit-animation-duration: 2s; 
-webkit-animation-name: kfRotateY; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function:linear; 


} 


@-webkit-keyframes kfRotateMinusY { 
from { 
-webkit-transform: 


} 


rotateY(-180deg); 


to { 


-webkit-transform: rotateY(180deg); 


系列 平移 ， 使 用 了 一 个 自 定义 的 三 
逆向 的 交替 播放 。kfFlLy 仅仅 定义 了 元 素 的 飞行 路 径 ; 


次 贝 塞 尔 插值 函数 ， 并 采用 了 正 向 和 
它 之 所 以 表现 出 “ 拍 动 翅 膀 ” 的 视 
对 面 的 animRotateY 类 和 animRotateMinusY 








} 


} 
@ 


} 


} 


} 


animRotateMinusY 

{ 
-webkit-animation-duration: 2s; 
-webkit-animation-name: kfRotateMinusy; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function:linear; 


-webkit-keyframes kfShake { 
0% { 
-webkit-transform:translate3d(0, 0, 0) rotateZ(0deg); 
} 
25% { 
-webkit-transform: translate3d(0, -20px, 0) rotatez(20deg); 
} 
50% { 
-webkit-transform: translate3d(0, 0, 0) rotateZz(-20deg); 
} 
100% { 
-webkit-transform: translate3d(0, -20px, 0) rotatez(-20deg); 
} 


animShake 

{ 
-webkit-animation-duration: .5s; 
-webkit-animation-name: kfShake; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function:ease-in-out; 


@-webkit-keyframes kfFLy { 


} 


0% { 

-webkit-transform:translate3d(0, 0, 0); 
} 
25% { 

-webkit-transform: translate3d(100px, -100px, 20px0); 
} 
50% { 

-webkit-transform: translate3d(200px, -200px,40px); 
} 
100% { 

-webkit-transform: translate3d(400px, -300px, 20px); 
} 


animFly 
{ 
-webkit-animation-duration: 2s; 
-webkit-animation-name: kfFly; 
-webkit-animation-iteration-count: 2; 
-webkit-animation-timing-function:cubic-bezier(0.1, 0.2, 0.8, 1); 
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-webkit-animation-direction:alternate; 


} 


你 也 许 已 经 注意 到 ，animRotateY 和 animRotateMinusy 中 的 animation-iteration-count 属 
性 都 被 定义 为 infinite， 然 而 左上 的 卡片 仅仅 旋转 了 一 次 。 这 是 因为 jQuery 代码 在 一 次 播 
放 后 停止 了 动画 (用 粗 体 标 出 的 代码 )。 


$('#front1').click(function(){ 
$('#front1').addClass('animRotateY'); 
$('#back1').addClass('animRotateMinusY'); 
setTimeout(function(){ 
$('#front1' ) .removeCLass('aniLmRotateY ' ); 
$('#back1').removeClass('animRotateMinusY'); 























}, 2000); 
} 
3 
这 些 类 设计 为 无 限 循环 ， 是 为 了 复 用 在 不 同 的 动画 效果 上 ， 例 如 它们 与 animFly 类 结合 
的 时 候 。 通 过 将 它们 定义 为 无 限 循 环 ， 我 们 可 以 轻松 地 在 JavaScript 中 控制 它们 的 开始 
和 停止 。 


6.4 挑战 CSS 的 极限 


到 目前 为 止 ， 本 章 中 的 示例 主要 集中 于 平面 物体 的 移动 。 然 而 这 些 技术 同样 也 可 以 用 来 创 
建 优秀 的 3D 用 户 界面 元 素 以 及 变换 效果 ， 但 是 它们 与 现今 的 游戏 和 其 他 全 3D 的 应 用 效 
果 之 间 还 有 一 定 的 距离 。 即 便 如 此 ， 一 些 开 发 者 仍然 在 试图 扩展 这 项 技术 的 边界 。 本 章 剩 
下 的 部 分 将 讲述 我 们 究竟 可 以 用 CSS3 创建 出 什么 样 的 3D 效果 。 


6.4.1 演 染 3D 物 体 

在 前 面 的 几 节 中 我 们 看 到 ， 为 了 创建 双 面 的 扁平 物体 ， 我 们 编写 了 一 些 HIML 和 CSS 代 
码 。 为 了 创建 带 深度 的 物体 ， 如 立方 体 ， 我 们 将 耗费 更 多 的 精力 。 许 多 CSS3 相关 的 站 点 
展示 了 关于 如 何 实现 这 些 效 果 的 优秀 示例 。 图 6-10 描绘 了 一 个 3D 的 虚拟 产品 盒子 ， 这 个 
作品 由 德国 开发 者 Dirk Weber 为 他 的 HTML5 开发 站 点 http:Wwww.eleqtriq.com 创建 。 这 
个 盒子 具有 前 、 后 、 两 侧 、 顶 和 底 ， 并 可 以 旋转 。 它 甚至 有 虚拟 的 倒影 ! 
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图 6-10: 用 CSS 创建 的 可 旋转 3D 物体 (http://www.eleqtriq.com/2010/11/natural-object-rotation- 
with-css3-3d/) 


Codrops (一 个 Web 设计 和 开发 博客 ，http://tympanus.net/codrops/) 团队 进一步 拓展 了 这 
个 盒子 的 概念 ， 他 们 创建 了 一 个 3D 的 虚拟 书籍 展示 。 你 可 以 打开 封面 来 阅读 书 中 的 内 容 ， 
还 可 以 翻 页 。 如 图 6-11 所 示 。 
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3DB 





A Catwork Orange 












Whale catfish leatherjacket deep 
sea angjerfsh grenadier sawfish 
pompano dolphinfish carp large 
eye bream, squeaker amago 
Sandroller, rough scad, tiger 
shovelnose catfish snubnose 
parasitic eef? Black bass 
duckbal--Rattaidl 


The Catfather 





Demo 2 


The Catcher in the Rye 





6-11: 3D 虚拟 书籍 展示 (http://tympanus.net/codrops/2013/01/08/3d-book-showcase/) 


创建 这 类 完整 的 3D 物体 需要 为 每 个 面 创建 一 个 或 多 个 HTML 元 素 ， 并 定义 许多 CSS 类 ， 
通常 还 需要 一 些 用 于 逻辑 控制 的 JavaScript。 它 非常 困难 ， 但 这 些 努 力 的 结果 是 值得 的 。 
看 看 这 里 和 附录 中 罗列 的 CSS 3D 站 点 。 这 些 站 点 中 的 多 数 站 点 都 自由 分 享 它们 的 源 代码 ， 


这 为 我 们 的 CSS 3D 创作 提供 了 一 个 很 好 的 起 点 。 


6.4.2” 演 染 3D 环 境 


鉴于 CSS 3D 基本 上 是 基于 对 矩形 物体 的 操作 来 实现 的 ， 它 看 起 来 不 太 可 能 被 用 来 创建 
身 临 其 境 的 游戏 环境 。 而 令 人 难以 置信 的 是 ， 英 国 开发 者 Keith Clark 做 到 了 ， 他 使 用 
JavaScript 和 CSS 3D 变换 ， 创 建 了 一 个 上 暗黑 风格 的 第 一 人 称 射 击 演示 。 结 果 如 图 6-12 


所 示 。 























图 6-12: 用 CSS 3D 和 JavaScript 构建 的 第 一 人 称 射击 演示 (http://blog.keithclark.co.uk/creating- 
3d-worlds-with-html-and-css/) 


Clark 的 作品 展示 了 CSS3 看 起 来 不 可 能 实现 的 一 些 特性 ， 甚 至 还 包括 3D 变换 。 

。 3D 几何 体 
CSS 仅仅 可 以 操作 抢 形 。 但 是 当 我 们 意识 到 真正 的 3D 泻 染 系统 通常 也 是 基于 将 多 个 平 
面 多 边 形 通常 是 三 角形 或 者 四 边 形 组 合成 更 复杂 的 形状 来 操作 时 ， 这 一 点 并 
不 能 称 为 局 限 。 同 样 ， 我 们 可 以 利用 PNG 图 片 来 作为 单个 四 边 形 中 的 alpha 通道 庶 黑 ， 
从 而 创建 出 具有 各 种 剪 切 形状 的 多 边 形 。 有 了 这 两 个 特性 ，Clark 就 可 以 利用 CSS 来 创 
建 圆 桶 、 枪 支 、 射 击 者 的 手 部 ， 以 及 其 他 仿真 的 3D 几何 体 。 

。 相机 、 叶 航 和 碰撞 
CSS 支持 基本 的 透视 ， 但 Clark 想 出 了 如 何 根 据 键 盘 输 入 实时 移动 一 个 虚拟 的 相机 ， 同 
时 通过 将 玩家 的 位 置 投影 到 2D 水 平面 上 ， 并 与 一 个 手工 制作 的 2D 高 度 图 进行 比较 来 
计算 碰撞 。 

。 灯光 和 阴影 
CSS 不 支持 元 素 的 照明 。 为 了 创建 仿真 的 光照 模型 ，Clark 需要 构建 每 个 四 边 形 的 法 向 
量 ， 在 JavaScript 中 创建 虚拟 的 光源 ， 在 一 个 <canvas> 元 素 中 离 屏 演 染 纹理 映射 ， 将 其 
和 基础 纹理 映射 混合 ， 来 创建 出 一 个 被 光线 照 亮 的 表面 。 

许多 开发 者 并 不 愿意 冒险 去 像 Keith Clark 一 样 进行 那么 复杂 的 工作 。 像 这 样 的 环境 如 果 使 

用 WebGL 和 类 似 Three.js 这 样 的 库 来 搭建 ， 会 非常 简单 。 尽 管 如 此 ， 这 个 项 目 仍然 是 用 

于 展现 CSS3 能 力 的 、 非 常 优秀 的 案例 研究 。 如 果 希 望 了 解 更 多 信息 ， 请 参见 Keith Clark 

对 这 个 项 目的 说 明 (http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/) 。 
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6.4.3 ”使 用 CSS 自 定义 滤 镜 来 实现 高 级 着 色 器 效果 


某 些 浏览 器 试验 性 地 允许 开发 者 使 用 GLSL 着 色 器 语言 来 将 任意 的 3D 效果 作用 于 CSS 元 
素 。 这 项 由 Adobe 系统 开拓 的 技术 被 称 为 CSS 自 定义 滤 镜 (旧称 为 CSS 着 色 器 )。 图 6-13 
展示 了 在 添加 CSS 自 定义 滤 镜 “ 揉 皱 ” 效 果 之 前 和 之 后 的 DOM 元 素 的 效果 。 当 鼠标 在 元 
素 上 移动 时 ， 着 色 器 程序 扭曲 了 组 成 元 素 显示 和 矩形 的 节点 ， 使 顶点 在 短 时 间 内 产生 运动 ， 
直到 它们 看 起 来 像 一 张 皱 巴 巴 的 纸 。 关 于 使 用 CSS 自 定义 滤 镜 ， 最 值得 注意 的 地 方 在 于 ， 
这 个 DOM 元 素 的 内 容 是 标准 的 HTML: 一 些 带 样式 的 文字 ， 以 及 一 张 图 像 。CSS 自 定 义 
滤 镜 允许 Web 开发 者 充分 利用 现 有 的 HTML 知识 ， 创 建新 的 吸引 眼球 的 交互 效果 。 
































抒 钙 着 色 器 揉 皱 着 色 器 


CHAPTER |. Down the Rabbit-Hole 


in 
of gett 
suddenly a White Rabbit 
yy her, 


Thew ngnothing so VERY remarvable in 
mg fehink it so VERY much oulof the 














图 6-13: 操 银 着 色 器 ， 一 个 CSS3 自 定义 滤 镜 ; 由 Altered Qualia 提供 (http://alteredqualia.com/ 
css-shaders/crumple.html/) 


CSS 自 定义 滤 镜 使 用 了 GLSL 着 色 器 语言 的 一 个 子 集 (GLSL ES)。 它 基本 上 和 WebGL 中 
使 用 的 GLSL ES 相同 ,但 有 一 些 非常 细微 的 差异 。 出 于 安全 性 考虑 ， 不 允许 CSS 自 定义 
滤 镜 直接 访问 页 面 元 素 上 的 像素 颜色 ， 相 反 ， 滤 镜 需 要 计算 出 一 个 混合 色彩 ， 它 最 终 将 作 
用 于 目标 像素 ， 用 于 计算 出 最 终 的 颜色 。 此 外 ， 浏 览 器 还 以 全 局 变量 的 形式 提供 了 一 些 预 
定义 的 值 ， 如 由 元 素 的 标准 CSS 3D 属性 (之 前 我 们 讨论 过 ) 定义 的 3D 变换 矩阵 。 另 一 
个 重要 的 差异 是 CSS 自 定义 滤 镜 是 可 选 的 ， 而 在 WebGL 演 染 中 着 色 器 则 是 必需 的 。 


注意 CSS 自 定义 滤 镜 还 是 一 个 实验 性 的 特性 ， 它 仅仅 被 某 些 浏览 器 支持 。 
在 本 书写 作 时 ， 这 个 特性 还 有 被 搓 置 的 危险 ， 因 为 某 些 人 更 倾向 于 将 DOM 
元 素 作 为 纹理 映射 整合 到 WebGL 标准 中 ， 而 这 项 工作 也 取得 了 相当 的 进 
展 。 在 此 期 间 这 项 特性 仍 被 Chrome 所 支持 ， 你 可 以 通过 一 个 特殊 的 命令 
行 (--enable-css-shaders) 来 开启 它 ， 或 者 在 用 户 偏好 设置 中 启用 CSS 
着 色 器 。 


















































6.4.4 用 Three.js 来 泻 染 CSS 3D 


即便 在 2014 年 ， 许 多 浏览 器 仍然 不 支持 WebGL， 包 括 iOS 上 的 Mobile Safari。 因 此 许多 
时 候 我 们 需要 使 用 降级 的 技术 来 创建 3D。 正 如 之 前 我 们 已 经 看 到 的 那样 ，CSS3 是 其 中 一 
个 选择 。 然 而 基于 CSS 来 进行 深度 的 3D 开发 需要 很 多 付出 劳动 ， 往 往 为 了 创建 几 个 3D 
对 象 ， 就 需要 大 量 的 CSS 类 和 HTML 元 素 。 

最 近 ，Mr.doob 开始 着 手 为 Three.js 创建 一 个 基于 CSS 的 演 染 系统 。Three.js 最 出 色 的 一 点 
在 于 它 可 以 使 用 不 同 的 浏览 器 技术 来 进行 泻 染 。Threejs 的 泻 染 架构 是 插件 式 的 ， 它 提供 
了 内 置 的 WebGL、2D Canvas、SVG 以 及 CSS 演 染 器 。 

Threejs 的 CSS 演 染 器 使 用 CSS 变换 来 对 物体 进行 平移 、 旋 转 以 及 缩放 ， 它 是 将 交互 式 
页 面 元 素 映 射 到 3D 空间 中 的 理想 方案 。 如 图 6-14 中 描绘 了 一 个 交互 式 的 元 素 周期 表 。 表 
格 的 每 个 单元 格 都 是 一 个 具备 完整 功能 的 DIV 标签 ， 因 此 它 可 以 用 HTML 来 泻 染 并 使 用 
CSS 来 添加 样式 。CSS 谊 染 器 是 为 矩形 、 富 文本 物体 创建 创新 性 布局 的 优秀 选择 。 
























































~ periodic table. info. 














图 6-14: 一 个 交互 式 的 元 素 周期 表 ， 用 Three.js 创建 ， 使 用 CSS 3D 变换 泻 染 (http:/mrdoob. 
github.io/three.js/examples/css3d_periodictable.html) 
6.5 小结 


本 章 研 究 了 用 于 创建 3D 效果 的 浏览 器 内 置 CSS3 属性 :CSS 变换 、CSS 过 渡 以 及 CSS 动 
画 。 你 了 解 到 了 如 何 使 用 CSS 变换 来 将 3D 平稳、 旋转 和 缩放 应 用 于 元 素 ， 并 使 用 或 不 使 
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用 透视 来 泻 染 它 们 ， 通 过 DOM 层级 结构 来 传播 3D 变换 ， 控 制 一 个 元 素 的 背面 泻 染 。 我 
们 使 用 CSS 过 渡 创 建 了 简单 的 动画 效果 ， 并 使 用 CSS 动画 创建 了 更 复杂 的 效 
CSS3 提供 了 用 于 创建 3D 用 户 界面 元 素 和 变换 效果 的 强大 能 力 ， 但 它 并 不 适合 用 来 构建 现 
今 游戏 和 其 他 图 形 密集 3D 应 用 的 效果 。 但 从 另 一 方面 来 说 ， 这 些 效果 非常 容易 创建 ， 它 
们 可 以 通过 CSS 辅 以 少量 JavaScript 代码 的 方式 来 实现 ， 它 们 是 跨 平台 、 跨 浏览 器 的 ， 最 
重要 的 是 ， 它 们 是 浏览 嚣 内置 的 特性 ， 这 表示 你 无 需 为 实现 这 些 效果 引入 额外 的 库 。 在 极 
少数 情况 下 ， 当 想 要 挑战 CSS3 的 极限 时 ， 我 们 可 以 使 用 大 量 的 JavaScript 技巧 或 引入 类 
似 Threejjs 这 样 可 以 用 CSS3 来 演 染 的 库 。 
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Canvas: 通用 2D 绘 医 




















最 终 ，3D 图 形 要 绘制 到 2D 的 平面 设备 上 ， 比 如 电脑 、 平 板 以 及 手机 。 深 度 和 透视 效果 使 
得 它们 看 起 来 像 3D， 使 得 某 些 物体 看 起 来 比较 近 、 某 些 看 起 来 比较 远 。 如 果 我 们 希望 3D 
内 容 是 交互 式 的 ， 那 么 演 染 速度 就 需要 足够 快 ， 至 少 每 秒 30 帧 ， 最 好 每 秒 60 帧 。 
WebGL 和 CSS3 使 用 GPU (现代 计算 机 和 其 他 设备 中 专门 用 来 处 理 图 形 的 硬件 ) 来 实现 
3D 实时 谊 染 。 尽 管 3D 硬件 加 速 对 于 交互 式 3D 图 形 来 说 极其 重要 ， 但 它 并 不 是 必需 的 。 
使 用 软件 泻 染 同样 可 以 创造 出 令 人 惊叹 的 3D 体验 。 对 于 Web 应 用 来 说 ， 软 件 演 染 意味 着 
使 用 Canvas 2D， 一 个 在 浏览 器 中 常见 的 2D 图 形 绘制 API。 

在 某 些 场景 下 ， 我 们 需要 考虑 使 用 Canvas 2D 而 不 是 WebGL。 一 种 场景 是 ， 尽 管 WebGL 
很 普及 ,但 写作 本 书 时 它 并 没有 被 所 有 移动 平台 所 支持 ， 尤 其 是 iOS 的 Safari 中 '。 在 这 些 
平台 上 ， 我们 可 以 使 用 Canvas 2D 作为 降级 方案 ， 尽 管 这 么 做 可 能 会 影响 性 能 或 牺牲 画 
质 。 另 一 种 场景 是 ， 我 们 可 能 需要 支持 电量 有 限 的 设备 ， 比 如 某 些 智能 手机 的 GPU 非常 
耗 电 ， 所 以 我 们 需要 使 用 纯 软 件 浑 染 来 延长 续航 时 间 。 还 有 一 种 场景 是 ， 我 们 想 要 创建 一 
个 简单 的 3D 效果 ， 使 用 WebGL 有 点 杀 鸡 用 牛刀 ， 而 CSS 又 不 够 强大 。 这 些 场景 更 适合 
使 用 Canvas 2D 来 取代 WebGL。 

在 本 章 中 ， 我 们 将 研究 如 何 使 用 Canvas API 来 泻 染 3D， 以 及 如 何 权 衡 性 能 和 效果 。 我 们 
还 会 研究 一 些 处 理 3D 数学 和 泻 染 的 开源 库 ， 这 些 库 能 让 我 们 专注 于 开发 应 用 。 


7.1 ” Canvas 基础 


苹果 在 2004 年 首先 引入 Canvas， 为 了 在 Dashboard 组 件 和 Safari 浏览 器 中 支持 高 级 界 
的 开发 。 它 的 做 法 是 提供 一 个 绘制 图 形 的 通用 画布 。 在 接 下 来 的 几 年 中 ， 它 被 Mozilla 自 
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注 1: iOS 8 中 已 经 支持 。 一 一 译 者 注 
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Gecko 引擎 、 其 他 基于 WebKit 引擎 的 浏览 器 (如 Chrome) 所 支持 ， 最 终 普 及 到 所 有 支持 
HTMLS 的 浏览 器 和 平台 。 


和 之 前 Web 标准 中 绘制 2D 矢量 图 形 的 DOM 元 素 及 SVG 不同 ，Canvas 并 没有 在 标签 中 
提供 一 系列 固定 的 形状 元 素 ， 它 提供 了 一 个 API 来 让 JavaScript 开发 者 任意 绘制 和 填充 各 
种 图 形 ， 包 括 直线 、 曲 线 、 多 边 形 和 文本 。 而 且 不 同 于 DOM 和 SVG，Canvas 使 用 了 类 似 
WebGL 的 过 程 模 型 。 在 浏览 器 的 场景 图 中 并 没有 包含 Canvas 元 素 内 部 的 内 容 ， 所 以 应 用 
必须 维护 好 它 内 部 的 对 象 和 绘制 操作 ， 以 便 在 重 绘 的 时 候 使 用 (比如 在 动画 中 )。 


全 面 研 究 Canvas API 超 出 了 本 书 的 范畴 ， 但 为 了 理解 和 3D 相关 的 Canvas 绘图 ， 我 们 需 
要 简单 介绍 一 下 它 的 基础 知识 。 


7.1.1 Canvas 元素 和 2D 绘 图 上 下 文 


HTMLS5 定义 了 一 个 新 的 DOM 元 素 : <Canvas>， 它 将 页 面 中 的 一 个 区 域 定义 为 可 绘制 的 。 
Canvas 元 素 类 似 于 图 像 元 素 : 你 可 以 使 用 标签 创建 它 ， 或 者 使 用 DOM 中 的 document 
createElement() API。 当 创建 好 后 ， 你 可 以 使 用 CSS 来 控制 Canvas 元 素 的 样式 ， 比 如 设 
置 边框 、 外 边 距 、 位 置 等 ， 甚 至 使 用 过 渡 添 加 动画 效果 。 


Canvas 元 素 仅 仅 声明 了 页 面 中 的 某 个 区 域 用 来 绘图 。 在 绘图 的 时 候 ， 你 需要 通过 上 下 文 
(context) 对 象 绘制 ， 这 个 对 象 提 供 了 绘图 的 API。 对 于 Canvas 绘图 ， 我 们 需要 使 用 2D 
的 上 下 文 对 象 ， 而 不 是 在 前 几 章 中 用 于 WebGL 绘图 的 3D 上 下 文 对 象 。 


例 7-1 展示 了 如 何 创建 一 个 Canvas 元 素 并 绘制 一 个 白色 正方 形 。 在 style 标签 中 ， 我 们 为 
Canvas 元 素 指定 了 黑色 的 背景 。 在 <body> 标签 中 ， 我 们 创建 了 一 个 以 像素 为 单位 指定 高 
宽 的 <canvas> 标签 。 在 页 面 domready 的 时 候 ， 我 们 通过 id 取得 Canvas 元 素 ， 然 后 通过 
canvas.getContext("2d") 获得 2D 上 下 文 对 象 。 当 获得 上 下 文 后 ， 我 们 将 它 的 fiLLStyte 
属性 设置 为 白色 ,然后 调用 context.filleRect()， 传 人 x、y 作为 左上 角 的 坐标 点 ， 以 及 
高 和 宽 ， 来 填充 一 个 矩形 区 域 。 


例 7-1: 基本 Canvas 绘图 示例 
<htmL> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Programming 3D Applications tin HTMLS and WebGL &mdash; 
Basic Canvas Example</title> 


































































































































































































</head> 
<style> 
#basicCanvas { 


background-color:Black; 


</style> 
<body> 


<canvas id="basicCanvas" width=500 height=500></canvas> 


</body> 





A 
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<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 


$(document).ready( 
function() { 


var canvas = document.getElementById("basicCanvas"); 
var context = canvas.getContext("2d"); 
context.fillStyle = '#ffffff"; 

context.fillRect(125, 125, 250, 250); 


)3 


</script> 
</html> 


显示 结果 很 眼熟 ， 请 看 图 7-1。 




















7-1: 使 用 Canvas API 绘制 一 个 正方 形 





十 分 简单 吧 。 它 与 第 2 章 和 第 3 章 的 例子 看 起 来 很 像 ， 然 而 它 只 用 了 几 行 JavaScript 代码 
(我 之 前 说 过 在 页 面 中 绘制 2D 图 形 还 有 更 简单 的 方法 ， 我 不 是 开玩笑 的 )。 这 个 例子 的 代 
码 可 以 在 Chapter 7/canvasbasic.html 中 找到 。 











7.1.2 ” Canvas API 的 功能 

Canvas 2D 上 下 文 提 供 了 一 个 基于 光栅 的 API。 也 就 是 说 ， 绘 制 是 基于 像素 的 (而 不 是 其 
他 图 形 系统 中 的 矢量 图 ， 如 SVG)。 如 果 应 用 需要 基于 窗口 大 小 缩放 图 形 ， 它 需要 手动 处 
理 。2D Canvas 的 API 调用 可 以 分 为 以 下 几 种 。 
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。 形状 绘制 
和 矩形、 多 边 形 以 及 曲线 形状 ， 可 以 是 填充 的 或 只 有 边框 。 
。 直线 和 路 径 绘制 
线段 、 弧 线 和 贝 塞 尔 
。 图 像 绘制 
来 自 图 像 元 素 或 其 他 Canvas 等 的 位 图 数据 。 
。 文本 绘制 
填充 或 描 边 文本 ， 使 用 根据 CSS 样式 定义 的 文本 属性 来 控制 文本 。 
。 填充 或 描 边 
使 用 CSS 样式 和 渐变 等 来 填充 或 描 边 。 
。 变换 
2D 变换 ， 包 括 平 移 、 旋 转 、 缩 放 以 及 任意 的 3x 3 变换 矩阵 。 
。 合成 
控制 新 绘制 的 图 形 和 已 有 的 Canvas 内 容 如 何 混合 。 
7-2 显示 了 调用 各 种 Canvas API 功能 后 的 效果 。 我 们 可 以 看 到 一 个 填充 的 矩形 、 一 个 描 
边 的 矩形 、 填 充 及 描 边 的 文本 、 一 个 填充 的 多 边 形 (三 角形 )、 一 个 填充 且 描 边 的 贝 塞 尔 曲 
线 、 一 个 位 图 、 一 个 使 用 位 图 来 进行 平 铺 的 圆 形 、 一 条 折线 ， 以 及 一 个 渐变 填充 的 矩形 。 











线 。 
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图 7-2: Canvas API 的 功能 ( 另 见 彩 插图 7-2) 
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例 7-2 展示 了 这 个 例子 中 的 JavaScript 代码 (文件 在 Chapter 7/canvasfeatures.html) ， 为 了 
简化 我 们 省 略 了 其 他 标签 部 分 。 


例 7-2: 详细 的 Canvas 绘图 示例 
function init() 


{ 
image1 = new Image; 
image1.src = '../images/parisi1.jpg'; 


image2 = new Image; 
image2.onload = function() 


{ 


imagepattern = context.createpattern(image2, "repeat"); 


image2.src = '../images/ash_uvgrid01.jpg'; 


gradient = context.createLinearGradient(250,0,350,0); 
gradient.addColorStop(0, "green"); 
gradient.addColorStop(1,"blue"); 

} 


function run() 


{ 
requestAnimationFrame(run); 
draw(canvas, context); 


} 


$(document).ready( 
function() { 


canvas = document.getElementById("features"); 
context = canvas.getContext("2d"); 

init(); 

run(); 


» 


首先 ， 在 页 面 domready 的 时 候 查 找 Canvas 元 素 并 获得 2D 上 下 文 对 象 ， 然 后 调用 init()， 
最 后 调用 run()。run() 基于 requestAnimationFrame() 来 实现 运行 循环 。 和 之 前 的 只 绘制 
一 次 的 例子 不 同 ， 这 次 我 们 不 断 进行 重 绘 。 我 们 这 么 做 有 两 个 原因 : (1) 这 是 更 符合 真实 
Canvas 应 用 的 结构 ， 因 为 内 容 某 些 时 候 会 有 动画 或 相应 的 用 户 操作 ;，(0) 这 里 在 某 些 帧 中 
需要 这 么 做 ， 因 为 我 们 需要 检测 图 像 是 否 已 经 加 载 完毕 。 我 们 需要 等 到 图 像 加 载 完毕 后 才 
绘制 ， 具 体 细 节 待 会 将 进行 介绍 。 

init() 函数 创建 了 两 个 图 像 元 素 ， 一 个 作为 位 图 内 容 ， 另 一 个 用 作 渐 变 效 果 ， 在 右 下 角 
的 矩形 中 进行 平 铺 。 它 还 基于 第 二 个 位 图 创建 了 一 个 填充 效果 ， 为 此 ， 在 加 载 图 像 前 添 
加 了 一 个 onload 事件 处 理 器 。onload 使 用 上 下 文 的 createPattern() 函数 来 创建 平 铺 。 
createpattern() 方法 需要 有 效 的 位 图 数据 ， 所 以 我 们 必须 等 到 图 像 加载 完 成 才能 调用 。 


run() 函数 实现 了 运行 循环 。 首 先 ， 它 让 浏览 絮 在 下 次 更 新 闻 期 的 时 候 再 调用 自己 ， 接 着 ， 
它 调用 draw() 来 实现 绘图 。draw() 的 代码 如 下 所 示 : 
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function draw(canvas, context) 


下 


context.clearRect(0, 0, canvas.width, canvas.height); 


context.save(); 
context. translate(50, 0); 


// 红色 填充 的 小 矩形 

context. save(); 

context.fillStyle = '#ff0000'; 
context.fillRect(25, 25, 100, 50); 
context.restore(); 








// 深蓝 色 描 边 的 小 矩形 

context. save(); 

context.strokeStyle = 'DarkBlue'; 
context.strokeRect(250, 25, 100, 50); 
context.restore(); 


// 填充 文本 

context. save(); 

context. lineWidth = 1; 
context.fillStyle = 'Black'; 
Context.font = '30px sans-serif'; 
context.fillText('Fill', 50, 125); 
context.restore(); 


// 对 文字 进行 描 边 
context.save(); 
context. lineWidth = 1; 
context.strokeStyle = 'Orange'; 
Context.font = 'italic 2em Verdana'; 
context.strokeText('Stroke', 250, 125); 
context.restore(); 


1 一 个 三 角形 

context. save(); 
context.beginpath(); 
context.fillStyle = 'Yellow’'; 
context.moveTo(75, 150); 
context. lineTo(25, 225); 
context. lineTo(125, 225); 
context. lineTo(75, 150); 
context.fill(); 
context.closepath(); 
context.restore(); 


// 一 条 填充 的 贝 塞 尔 曲线 

context.save(); 

context.beginpath(); 

context.strokeStyle = 'Green'; 
context.fillStyle = 'LightBlue'; 
context.moveTo(300,150); 
context.bezierCurveTo(225,175,275,225,275,225); 
context.bezierCurveTo(350,250,350,225,350,225); 
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context.bezierCurveTo(350,175,300,175,300,150); 
context. stroke(); 

context.fill(); 

context.closepath(); 

context.restore(); 














// 一 个 位 区 
if (image1.width) 
{ 


context.save(); 
context.drawImage(image1, 11, 250, 128, 128); 
context.restore(); 


} 


// 一 个 用 位 图 填充 的 圆 
if (image2.width) 
{ 





























context .save(); 

context.strokeStyle = 'DarkGray'; 
context.fillStyle = imagepattern; 
context.beginpath(); 

context.arc(300, 314, 64, 0, 2 * Math.PI, false); 
context.scale(.5, .5); 

context.fill(); 

Context .stroke(); 

Context.CLosepPath(); 

Context .restore(); 


} 
// 一 条 折线 


context.save(); 

context.strokeStyle = "rgb(128, 0, 255)"; 
context.beginpath(); 

context. LineWidth = 3; 

context.moveTo(25, 450); 

context. lineTo(75, 425); 

context. lineTo(150, 475); 

context. stroke(); 

context.closePpath(); 

context.restore(); 


// 一 个 渐变 填充 

context. save(); 

context.fillStyle = gradient; 
context.fillRect(250, 425, 100, 50); 
context.restore(); 


context.restore(); 


} 
draw() 函数 显示 了 Canvas 2D API 的 许多 特性 ， 这 里 我 将 强调 以 下 几 点 。 
。 context.clearRect() 被 用 来 清除 canvas 中 的 内 容 。 如 果 没 有 它 ， 图 形 会 不 断 在 之 前 的 
帧 上 县 加 。 
。 context.translate() 被 用 来 移动 所 有 随后 绘制 的 物体 的 位 置 ， 它 的 值 会 添加 到 所 有 其 
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他 绘图 操作 中 。 

。 注意 到 context.save() 和 context.restore() 的 使 用 。 这 两 个 方法 允许 开发 者 在 修改 绘 

图 状态 前 保存 状态 ， 并 在 绘制 结束 后 恢复 。 它 会 保存 变换 、 描 边 和 填充 样式 、 字 体 、 线 

段 宽度 等 状态 。 训 览 器 使 用 一 个 栈 来 保存 这 些 状态 ， 所 以 这 些 方法 都 是 可 以 被 内 艇 调用 

的 。 它 对 于 绘制 具有 层次 结构 的 物体 非常 有 帮助 。 一 般 情 况 下 ， 我 们 不 希望 一 个 绘图 操 

作 影响 另 一 个 绘图 操作 。 然 而 ， 需 要 注意 这 个 操作 会 带 来 一 定 的 性 能 开销 ， 所 以 在 使 用 
它们 的 时 候 需 要 小 心 。 

。 beginPath() 和 closePath() 方法 允许 我 们 自 定义 折线 和 曲线 的 路 径 。Canvas 维护 了 一 
个 虚拟 的 笔 位 置 ， 我 们 通过 moveTo()、LineTo() 和 bezierCurveTo() 这 些 方法 来 控制 它 。 
beginPath() 方法 会 重 置 笔 的 状态 ， 而 closePath() 方法 则 将 当前 笔 的 位 置 和 最 开始 调 
用 moveTo() 时 笔 的 位 置 连 起 来 。 

。 图 像 的 绘制 是 通过 context.drawImage() 来 完成 的 。 我 们 需要 等 待 图 像 加 载 完 后 才能 绘 
制 它 ， 而 这 通过 测试 图 像 的 宽度 不 为 零 来 判断 。drawImage() 函数 可 以 以 图 像 本 身 的 大 
小 来 进行 绘制 ， 或 者 通过 传人 第 四 和 第 五 个 参数 来 控制 它 的 宽 高 ， 从 而 进行 缩放 。 图 像 
同样 可 以 被 用 来 平 铺 物体 ， 我 们 等 image2 加 载 完 后 调用 context .createPattern() 来 创 
建 平 铺 效果 。 通 过 它 生成 的 平 铺 对 象 会 保存 到 imagepattern 变量 中 ,然后 用 来 平 铺 圆 形 。 


这 个 例子 只 涉及 Canvas 2D 图 形 绘制 的 部 分 API， 它 还 有 其 他 大 量 的 功能 。 使 用 Canvas 演 
染 有 它 自己 的 性 能 问题 及 最 佳 实践 ,但 它 已 经 超出 了 本 书 的 范畴 。 请 参考 本 书 附录 来 了 解 
Canvas API 的 其 他 信息 。 


7.2 使 用 Canvas API 来 泻 染 3D 






































































































































前 面 我 们 学 习 了 Canvas 2D API 的 基础 知识 ， 现 在 我 们 可 以 开始 讨论 使 用 它 来 谊 当 3D 系 
统 时 的 问题 。 尽 管 有 多 种 方法 ， 但 大 部 分 软件 泻 染 的 实现 都 模仿 了 硬件 演 染 流程 ， 先 将 带 
颜色 的 三 角形 、 线 条 、 点 从 模型 (对象) 空间 变换 到 屏幕 空间 ， 然 后 再 进行 绘制 。 


使 用 3D 硬件 加 速 的 时 候 ， 我 们 用 GLSL 着 色 器 代码 来 进行 计算 ， 它 有 强大 的 内 建国 数 ， 

并 且 编 译 为 在 GPU 中 执行 的 底层 机 器 码 。 但 如 果 没 有 3D 加 速 硬 件 ， 我 们 就 需要 先 在 

JavaScript 中 实现 这 些 计算 ， 然 后 再 把 上 好 颜色 且 变 换 好 后 的 物体 通过 Canvas API 进行 最 

终 泻 染 。 这 些 计 算 包括 维护 3D 几何体、 变换、 光线、 着 色 ， 以 及 将 3D 物体 投影 到 2D 视 

口上 。 上 述 工作 需要 大 量 的 计算 ， 即 便 在 高 性 能 的 机 器 上 也 有 很 大 负担 ， 而 开发 者 所 耗费 

的 脑力 就 更 用 不 提 了 。 

软件 泻 染 器 通常 会 做 以 下 几 个 工作 。 

。 变换 三 角形 ， 将 三 角形 从 物体 空间 变换 到 屏幕 空间 。 这 需要 乘 以 几 个 矩阵 ， 有 具体 视 场 景 
的 复杂 度 而 定 。 在 最 低 限 度 上 ， 它 需要 将 物体 的 三 角形 从 世界 空间 (假设 没有 其 他 更 多 
的 变换 ) 变换 到 相机 空间 ， 然 后 通过 透视 投影 将 它 变 换 到 屏幕 的 2D 空间 。 

。 将 三 角形 进行 着 色 ， 这 需要 根据 具体 的 材质 来 定 。 如 果 涉 及 光照 ， 顶 点 法 向 量 和 光源 都 
需要 纳入 进来 。 使 用 Canvas 2D API 需要 动态 生成 纹理 或 渐变 来 创建 光线 效果 ， 这 会 非 
常 耗 CPU。 如 果 材 质 有 纹理 ， 材 质 还 需要 进行 过 滤 、 透 视 修正 以 及 其 他 操作 来 让 它 看 
起 来 平滑 和 逼真 。 尤 其 是 很 难 实现 实时 修正 透视 和 过 滤 。 你 将 会 在 下 面 的 例子 中 发 现 ， 
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应 用 中 的 纹理 差异 非常 大 。 

。 将 三 角形 进行 排序 ， 基 于 它 和 视 口 的 距离 。 为 了 让 我 们 的 场景 看 起 来 正确 ， 靠 视 口 前 面 
的 三 角形 应 该 演 染 在 前 面 ， 也 就 是 说 要 谈 住 后 面 的 三 角形 。 在 硬件 加 速 系 统 中 使 用 深度 
缓存 (depth buffer， 也 被 称 为 z 缓存 ) 来 实现 ， 它 跟踪 每 个 像素 点 与 相机 的 距离 。 深 度 
缓存 和 颜色 缓存 是 并 列 的 。 在 每 个 坐标 上 有 颜色 缓存 ， 同 时 也 有 深度 缓存 来 记录 这 个 点 
离 相机 的 距离 ， 演 染 器 会 在 绘制 像素 点 到 颜色 缓存 的 时 候 测 试 它 。 如 果 这 个 像素 点 比 之 
前 在 深度 缓存 中 记录 的 位 置 更 近 ， 就 绘制 它 ， 如 果 不 是 ， 就 不 绘制 。 软 件 泻 染 几 乎 都 没 
有 深度 缓存 ， 因 为 它 太 占 内 存 了 ， 而 且 计 算 成 本 很 高 。 作 为 替代 ， 它 们 采用 三 角形 排序 
的 方法 ， 通 过 矩形 某 个 点 的 位 置 来 进行 判断 。 这 个 点 通常 会 选择 三 角形 的 集合 中 心 点 ， 
不 过 也 可 以 使 用 最 近 或 最 远 的 z 值 ， 这 里 并 没有 标准 的 做 法 。 对 三 角形 进行 排序 是 软件 
泻 染 中 最 影响 性 能 的 部 分 ， 你 会 发 现 整体 矩形 的 数量 决定 了 你 的 性 能 。 

即使 一 个 高 质量 的 软件 泻 染 实现 解决 了 所 有 阻挡 在 它 前 面 的 问题 ， 反 锯齿 泻 染 (对 物体 的 

边缘 进行 平滑 处 理 ) 还 是 很 难 通过 软件 实时 做 到 的 ， 它 需要 多 次 泻 染 一 个 物体 或 整个 场 

景 。 使 用 mipmapping 和 双向 性 过 滤 (bilinear filtering) 来 对 材质 进行 过 滤 的 计算 成 本 非常 

高 ， 这 导致 软件 渲染 的 纹理 看 起 来 粗糙 晶 颗 粒状 明显 。 请 看 图 7-3 的 例子 。 而 且 ， 位 图 填 

充 的 速度 (例如 ， 对 CSS sprite 来 说 ) 在 软件 演 染 中 远 比 硬件 中 慢 。 









































图 7-3: 基于 软件 泻 染 的 纹理 映射 ， 转 载 已 被 许可 


男 外 ， 三 角形 排序 虽然 在 有 些 场景 下 可 以 殖 代 深 度 缓存 ， 但 在 其 他 场景 下 会 有 明显 问题 。 
例如 ， 妆 两 个 三 角形 重 且 的 时 候 ， 没 有 好 的 方法 对 它们 进行 排序 。 请 看 图 7-4， 从 相机 的 视 
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角 看 ， 三 角形 B 既 在 三 角形 A 的 前 面 也 在 三 角形 A 的 后 面 。 一 个 软件 浑 染 排序 算法 必须 选 
择 哪个 三 角形 在 前 面 ,以 此 完全 遮 住 另 一 个 三 角形 。 结 果 就 是 ， 当 物体 相对 相机 移动 的 时 
候 ， 你 会 偶尔 看 到 三 角形 跳出 来 或 被 隐藏 ， 这 在 使 用 深 度 缓存 的 硬件 泻 染 中 永远 不 会 发 生 。 


B A 
相机 一 一 > X 


7-4: 三 角形 的 深度 排序 一 一 三 角形 A 的 一 部 分 比 三 角形 B 更 靠近 相机 ， 但 三 角形 B 同样 也 有 一 
部 分 比 三 角形 A 更 靠近 相机 ， 所 以 没有 好 的 解决 方案 (图 像 来 自 MSDN 关于 深度 排序 的 
文章 http://blogs.msdn.com/b/shawnhar/archive/2009/02/18/depth-sorting-alpha-blended- 
objects.aspx; 转载 已 被 许可 ) 


我 们 可 以 看 到 ， 在 能 用 硬件 泻 染 的 时 候 使 用 软件 演 染 并 不 是 一 个 理想 的 方案 。 获 得 相同 的 
视觉 效果 及 性 能 即使 有 可 能 ， 也 非常 困难 。 然 而 尽管 有 许多 内 在 的 限制 ， 但 依然 有 些 令 人 
惊叹 的 努力 去 使 用 2D Canvas API 来 创建 高 性 能 3D 效果 。 


几 年 前 ， 英 国 的 Jean dArc 创建 了 一 个 浏览 Ouake 3 关卡 地 图 的 查看 器 ， 它 是 基于 2D 
Canvas 的 。 图 7-5 显示 了 它 的 截图 。 你 可 以 访问 http://www.zynaps.com/site/experiments/ 
quake.html 来 尝试 。 性 能 在 较 新 的 笔记 本 上 可 以 接受 ， 尽 管 纹理 因 为 没有 过 滤 看 起 来 颗粒 
状 明显 ， 但 还 是 很 不 错 的 。 这 之 前 是 Chrome 实验 中 用 于 展示 2D Canvas 能 力 的 例子 ， 在 
它 开 发 的 时 候 WebGL 还 远 不 流行 。 尽 管 现在 它 的 重要 意义 已 经 成 为 历史 ， 但 它 展示 了 
Canvas 能 做 的 事情 和 软件 泻 染 技术 的 强大 。 













































































7-5; 使 用 2D Canvas API 泻 染 的 Quake 3 地 图 查看 器 (http:/www.zynaps.com/site/experiments/ 
quake.html) ; 转载 已 被 许可 
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7.3 基于 Canvas 泻 染 的 3D 库 


如 之 前 讨论 的 那样 ， 使 用 Canvas 来 泻 染 3D 有 许多 技术 问题 。 为 了 尝试 解决 它 ， 出 现 了 几 
个 库 ， 包 括 K3D (https://launchpad.net/canvask3d)、Cango3D (http://arc.id.au/Canvas3DGra- 
phics.html) 、Nihilogic (http:/www.nihilogic.dk/labs/canvas3d/) 以 及 Three.js (https://github. 
com/mrdoob/three.js/)。 在 本 节 中 ， 我 们 将 研究 它们 中 的 两 个 : K3D 和 Three.js。 





7.3.1 K3D 


K3D 由 英国 的 Kevin Roast (http://www.kevs3d.co.uk/dev/; Twitter 账号 @kevinroast) 所 创 
建 。Kevin 是 一 个 UI 开 发 者 和 图 形 爱好 者 。 尽 管 K3D 还 在 开发 早期 ， 没有 Three.js 那样 
丰富 的 功能 ， 但 它 令 人 印象 深刻 。 具 体 来 说 ， 它 性 能 很 好 ， 对 于 着 色 与 纹理 的 支持 不 错 。 
图 7-6 展示 了 4steroids [Reloaded] 的 截屏 ， 它 是 一 款 基 于 K3D 实现 的 经 典 游戏 。 注 意 到 岩 
石上 平 请 的 着 色 、 光 线 ， 以 及 高 精细 的 纹理 。 






































7-6: Asteroids [Reloaded)]， 一 款 基于 K3D 的 3D 游戏 ,使 用 2D Canvas API 进行 绘制 (http/ 
www.kevs3d.co.uk/dev/asteroids/) 


基于 之 前 在 K3D 上 的 工作 ，Kevin 现在 对 K3D 进行 了 重 写 ， 开 发 了 Phoria (http://www. 
kevs3d.co.uk/dev/phoria/)。Phoria 承诺 会 提供 更 强大 的 功能 及 更 为 通用 ， 但 它 依然 处 于 开 
发 早期 ,目前 它 的 例子 还 远 不 够 吸引 人 。 
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7.3.2 Three.js 的 Canvas 演 染 


既然 我 们 使 用 Three.js 来 开发 本 书 中 的 其 他 例子 ， 考 虑 使 用 它 来 做 基于 软件 的 3D 谊 染 也 
是 很 自然 的 ， 尤 其 是 如 果 主 要 目标 是 对 不 支持 WebGL 的 平台 开发 降级 方案 。 使 用 Three. 
js， 我 们 可 以 在 有 条 件 使 用 WebGL 的 时 候 使 用 WebGL， 在 没 条 件 的 时 候 使 用 Canvas， 而 
这 不 需要 修改 太 多 代码 。 尽 管 从 3D 演 染 切换 到 2D 泻 染 并 不 是 完全 透明 的 ， 你 需要 写 几 
行 代码 来 充分 使 用 Canvas 泻 染 的 功能 ， 但 这 些 代 码 不 足 挂 齿 。 


Three.js 使 用 了 渲染 插件 的 架构 ， 并 自 带 了 可 以 直接 使 用 的 2D Canvas 演 染 
器 。 这 并 不 令 人 惊奇 ， 因 为 Three.js 最 早 是 基于 Mr.doob 演 染 Flash 2D 图 
形 的 工作 ， 所 以 使 用 HTML5 Canvas 泻 染 器 是 一 个 自然 的 转变 。 事 实 上 ， 
Canvas 泻 染 器 还 比 WebGL 演 染 器 更 早 实现 。 



































Three.js 中 有 一 大 堆 基 于 Canvas 的 例子 。 但 不 幸 的 是 ， 它 们 大 部 分 都 不 吸引 人 。 不 过 有 几 
个 值得 在 这 里 提 一 下 。 在 Three.js 项 目的 源 文件 中 ， 打 开 examples/canvas_geometry_earth. 
html， 如 图 7-7 所 示 。 你 会 看 到 一 个 带 纹理 映射 的 旋转 地 球 。 它 并 不 比 WebGL 的 版 本 漂 
亮 ， 但 还 是 很 不 错 的 。 你 最 明显 察觉 到 的 应 该 是 球体 不 是 完全 地 契合 ， 这 就 是 说 ， 没 有 大 
多 的 矩形 来 绘制 它 。 你 可 以 在 旋转 的 时 修 看 到 三 角形 边缘 。 尽 管 并 不 像 高 尔 夫 球 那 么 硅 
张 ， 但 它 还 是 比较 粗糙 。 原 因 就 是 三 角形 排序 。 你 必须 控制 三 角形 的 数量 ， 因 为 深度 排序 
三 角形 是 一 个 最 少 OOVlogN) 的 操作 ， 所 以 三 角形 更 多 意味 着 排序 更 慢 。 





























7-7: 使 用 Three.js 的 Canvas 泻 染 器 绘制 的 纹理 映射 地 球 


Canvas 演 染 很 适合 用 来 做 简单 的 3D 全 景 图 。 在 这 里 我 们 将 讨论 泻 染 12 个 三 角形 〈 立 方 体 
内 部 有 六 个 面 ， 每 个 面 需 要 演 染 两 个 三 角形 )， 所 以 三 角形 数量 并 不 是 个 问题 。 打 开 Three. 
js 例子 中 的 examples/canvas_geometry_panoramas.html 来 查看 3D 全 景 效果 ， 如 图 7-8 所 
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示 。 使 用 鼠标 来 旋转 场景 ， 导 航 起 来 很 平 请 ， 而 且 全 景 效果 看 起 来 不 错 。 








7-8: 使 用 Three.js 的 Canvas 泻 染 器 绘制 的 全 景 图 











Three.js 的 Canvas 这 染 同 样 擅长 绘制 大 量 简单 的 2D 多 边 形 ， 如 扁平 的 2D 多 边 形 ， 摆 放 
在 3D 空间 中 。 这 是 一 个 创建 类 似 粒 子 动画 这 样 花哨 页 面 效 果 的 好 方法 。 图 7-9 展示 了 一 
个 例子 ( 源 文 件 examples/canvas_particles_random.html) ， 当 鼠标 在 屏幕 中 移动 的 时 候 ， 有 
1000 个 随机 的 粒子 在 跟着 动 。 这 些 形状 是 扁平 的 ， 但 它们 在 3D 空间 中 移动 。 想 象 一 下 ， 
如 果 使 用 CSS 3D 变换 来 实现 这 个 效果 ，1000 个 独立 的 元 素 会 让 广 览 器 不 堪 重 负 。 但 使 用 
Canvas 就 很 轻松 了 ， 而 基于 Three.js 就 更 容易 创建 了 。 

































































7-9: 使 用 Three.js Canvas 泻 染 器 泻 染 的 1000 个 粒子 动画 
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1. 如 何 使 用 Three.js 的 Canvas 泻 染 器 

让 Three.js 使 用 Canvas 很 简单 ， 只 需要 创建 一 个 不 同类 型 的 泻 染 对 象 。 但 还 有 其 他 微妙 
的 操作 。 让 我 们 看 一 个 简单 的 例子 。 在 其 中 ， 我 们 会 探索 一 些 Three.js Canvas 泻 染 器 和 
WebGL 泻 染 器 在 展示 效果 和 性 能 上 的 不 同 。 最 后 ， 我 们 会 在 实际 例子 中 测试 。 在 这 之 前 
演示 的 例子 都 不 够 真 灾 ， 更 像 是 技术 演示 。 让 我 们 尝试 通过 多 边 形 模 型 及 纹理 来 创建 一 些 
具体 的 、 类 似 游戏 的 图 形 。 

图 7-10 展示 了 使 用 Three.js Canvas 泻 染 器 来 制作 游戏 的 效果 。 它 是 一 个 用 来 评估 视觉 质量 
和 帧 率 的 简单 查看 器 。 在 浏览 器 中 打开 文件 Chapter 7/threejscanvasmodel.html， 你 会 看 到 
企 一 个 简单 星空 背景 上 缓慢 旋转 的 三 艘 太空 船 。 你 可 以 使 用 鼠标 来 旋转 场景 ， 使 用 潜 轮 来 
放大 和 缩小 。 你 可 以 通过 点 击 Animate 复 选 框 来 开始 和 停止 动画 。 这 个 例子 还 允许 你 切换 
使 用 Canvas 及 WebGL 来 进行 比较 。 让 我 们 先 来 研究 Canvas 的 版 本 。 



































7-10: 使 用 Three.js 的 Canvas 泻 染 器 来 泻 染 模型 ， 太 空 船 模型 来 自 Turbosquid (http://www. 
turbosquid.com/FullPreview/Index.cfm/ID/499274)， 作 者 是 gentlemenk (http:/www.tur 
bosquid.com/Search/Artists/gentlemenk) 


注意 左上 角 的 帧 率 ， 它 处 于 20~23fps。 如 果 你 停止 动画 并 放大 场景 ， 让 一 艘 太空 船 从 视野 
中 消失 ， 你 会 发 现 帧 率 忽然 增加 到 了 30fps 左右 。 你 可 以 再 尝试 让 视野 中 只 剩 下 一 稻 太 空 
船 ， 你 会 发 现 帧 率 到 了 50fps 左右 ， 甚 至 60fps。 这 清晰 演示 了 我 们 之 前 提 到 的 三 角形 排 
序 问题 。 因 为 Threejs 的 Canvas 泻 染 器 没有 深度 缓存 ， 所 以 它 需 要 进行 三 角形 排序 。 越 多 
的 三 角形 意味 着 越 慢 的 排序 速度 。 但 我 们 放大 到 只 看 见 一 稻 船 的 时 候 ，Three.js 很 聪明 地 
将 其 他 物体 忽略 〈 剔 除 ) 掉 了 ， 所 以 它们 不 需要 进行 三 角形 排序 。 这 些 太空 船 模型 都 很 简 
单 ， 每 个 由 大 约 1200 个 三 角形 组 成 。 这 对 于 现代 游戏 来 说 并 不 多 ， 所 以 这 个 例子 说 明了 
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我 们 使 用 Canvas 滨 染 时 需要 节约 多 边 形 的 使 用 到 何 种 程度 。 现 在 来 看 看 它 的 材质 。 太 空 
船 被 照 亮 了 ， 而 且 场 景 还 有 一 个 定向 光源 ， 它 应 该 照 亮 太空 船 中 的 各 种 部 件 ， 然 而 ， 我 们 
并 没 看 到 那个 效果 。Threejs 可 以 应 用 一 些 光 源 ， 但 效果 都 很 基础 ， 我 们 并 没有 看 到 物体 
表面 上 光滑 的 着 色 效果 。 你 可 以 尝试 一 下 Three.js 中 的 其 他 Canvas 效果 ， 来 看 看 材质 和 光 
源 能 做 得 怎样 。 

2. 比较 Canvas 泻 染 器 和 WebGL 泻 染 器 

现在 我 们 切换 泻 染 器 来 进行 比较 ， 点 击 WebGL 的 单 选 框 按钮 来 使 用 WebGL 来 演 染 场景 。 
如 图 7-11 所 示 。 视 觉 对 比 非常 明显 。 在 WebGL 版 本 中 ,纹理 看 起 来 很 平滑 ， 尤 其 是 物体 
在 远 处 的 时 候 ， 而 在 Canvas 版 本 中 颗粒 状 明显 。 边 缘 的 反 锯 齿 也 比 Canvas 版 本 更 加 平滑 。 
最 引 人 注 目的 差别 是 光照 ， 我 们 可 以 清楚 地 看 到 定向 光源 带 来 的 高 亮 效 果 ， 而 这 在 Canvas 
版 本 中 是 设 有 的 。 而 在 性 能 方面 ， 看 看 帧 率 你 会 发 现 即便 所 有 太空 船 都 在 场景 中 ， 它 依然 
稳定 保持 在 60 fps。 这 并 不 令 人 吃惊 ， 因 为 Three.js 只 需 做 很 少 的 工作 。 在 场景 中 只 有 少 
数 几 个 物体 ， 多 边 形 数 量 不 多 且 纹 理 简 单 。 儿 乎 所 有 的 计算 都 是 在 硬件 中 完成 的 (也 就 是 
说 ， 在 Three.js WebGL 泻 染 器 内 的 GLSL 着 色 器 代码 中 )。 
















































































7-11: 使 用 Three.js WebGL 泻 染 器 渲染 的 太空 船 


管 这 些 或 许 看 起 来 描绘 了 一 幅 使 用 Canvas 做 3D 游戏 的 诅 形 画面 。 我 们 在 简单 的 场景 下 
Je 使 得 我 们 不 得 不 对 视觉 质 量 妥 协 。 但 这 是 斐 观 主义 的 看 法 。 从 另 一 
了 我 们 能 够 只 使 用 JavaScript 就 在 页 面 中 创建 了 上 千 个 带 纹理 的 三 角形 ， 这 已 

经 很 令 人 骄傲 了 。 如 果 我 们 开发 简单 的 游戏 ， 并 且 可 以 创建 一 种 在 局 限 条 件 (例如 低 多 边 
形 和 预 泻 染 光 ) 下 的 艺术 风格 ， 同 样 可 以 做 出 邻 人 惊叹 的 事情 。 
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只 需要 几 行 代码 就 能 让 Three.js 使 用 Canvas 泻 染 器 。 下 面 这 个 例子 的 源码 可 以 在 Chapter 
7/threejscanvasmodel.html 中 找到 。 例 7-3 给 出 了 创建 泻 染 器 的 代码 。 注 意 粗 体 标注 的 代码 
行 ， 我 们 创建 了 一 个 THREE.CanvasRenderer 类 型 的 对 象 ， 而 不 是 WebGL 演 染 器 。 

例 7-3: 创建 Three.js Canvas 演 染 器 


function createRenderer(container, useCanvas) 





{ 
if (useCanvas) { 
renderer = new THREE.CanvasRenderer( { }); 
else { 
renderer = new THREE.WebGLRenderer( { antialias: true } ); 
} 
container .appendChild( renderer .domELement ); 
// 设置 视 口 大 小 
renderer .setSize(container.offsetWidth, container.offsetHeight); 
} 





一 旦 Canvas 泻 染 器 创建 好 后 ， 我 们 就 能 以 和 WebGL 相同 的 方式 来 泻 染 : 

// 泻 染 场景 

renderer .render( scene.scene, scene.camera ); 
对 于 简单 的 使 用 ， 这 确实 是 我 们 唯一 需要 更 改 的 一 行 代码 。 但 在 这 个 例子 中 ， 我 们 还 需要 
做 另外 一 个 事情 。Three.js 让 我 们 可 以 通过 “过 度 ” 绘 制 三 角形 的 方法 来 实现 简单 的 边缘 
反 锯 元， 它 的 做 法 是 在 绘制 的 时 候 都 多 绘制 一 个 像素 ， 用 来 隐藏 三 角形 间 的 颖 合 处 。 但 不 
幸 的 是 ， 我 们 不 能 在 谊 染 器 中 设置 一 个 antiatLias 标记 (在 WebGL 中 我 们 可 以 这 么 做 )， 
而 需要 在 每 一 个 材质 上 设置 。 这 需要 在 模型 加 载 后 遍历 它 的 材质 ， 然 后 设置 overdraw 属性 
为 true。 查 看 例 7-4。 我 们 在 每 个 模型 加 载 完 成 的 时 候 设 置 了 一 个 回调 函数 。 这 个 回调 函 
数 会 调用 模型 中 的 traverse() 方法 进行 遍历 ， 然 后 访问 每 个 场景 图 中 的 后 代 。 我 们 的 辅助 
国 数 processNodes() 先 测试 对 象 是 否 是 一 个 网 格 ， 如 果 是 的 话 ， 就 设置 网 格 上 的 overdraw 
属性 。 这 个 额外 的 工作 有 点 麻烦 ， 但 总 的 来 说 需要 做 的 事情 还 是 不 多 的 。 这 两 处 修改 就 是 
使 用 Canvas 和 WebGL 演 染 的 唯一 区 别 。 


例 7-4: 遍历 场景 中 的 材质 


function processNodes(n) 





























if (n instanceof THREE.Mesh) 
{ 


} 


n.material.overdraw = true; 


} 


function handleSceneLoaded(data, parent) 


// 将 网 格 添加 到 分 组 中 
parent.add( data.scene ); 
data.scene.traverse(function(n) { processNodes(n) }); 





} 





A 
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7.4 小 结 


本 章 详细 说 明了 如 何 使 用 2D Canvas API 来 实现 3D 的 软件 泻 染 。 所 有 HIML5 浏览 器 都 支 
持 Canvas API。 在 简单 介绍 了 Canvas API 的 绘制 功能 后 ， 我 们 研究 了 软件 泻 染 中 国有 的 一 
些 问题 ， 包 括 变 换 、 着 色 和 深度 排序 。 我 们 学 习 了 基于 Canvas 的 3D 库 ， 特 别 是 如 何 使 用 
Three.js 的 Canvas 这 染 器 来 替代 WebGL。 这 里 面 有 许多 折 囊 ， 尤 其 是 性 能 和 视觉 保 真 方 
面 。Canvas 提供 了 一 个 可 行 的 WebLG 替代 方案 ， 尤 其 是 在 简单 、 有 限 的 使 用 场景 下 ， 可 
以 使 用 它 来 作为 不 支持 WebGL 平台 上 的 降级 方案 。 
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第 二 部 分 





应 用 开发 技术 


第 8 和 章 


30 和 内容 制作 流程 





在 Web 发 展 的 早期 ， 如 果 你 知道 如 何 写 标签 ， 你 就 是 Web 内 容 的 创建 者 。 当 时 没有 
Dreamweaver 这 类 所 见 即 所 得 的 编辑 器 ， 也 没有 PhotoShop 这 类 切 图 工具 。 在 当时 ，Web 
内 容 创建 的 绝 大 部 分 工作 都 由 程序 员 来 完成 一 一 而 那个 时 期 的 Web 也 恰恰 反映 出 了 这 个 特 
色 。 后 来 ， 软 件 开 发 商 们 发 布 了 创建 Web 内 容 的 专业 编辑 工具 。 当 这 些 工具 流行 起 来 之 
后 ， 艺 术 家 和 设计 师 们 也 逐 浙 承 担 起 创建 内 容 的 职责 ， 互 联网 的 体验 终于 提升 到 了 消费 级 
的 水 平 。 


WebGL 开发 正在 经 历 和 早年 Web 类 似 的 演变 。 该 技术 最 早出 现 的 几 年 中 ， 内 容 是 由 程序 
员 利 用 文本 编辑 器 手工 编写 创建 的 ， 或 者 使 用 能 够 找到 的 转换 器 将 其 他 3D 格式 的 内 容 转 
换 为 WebGL 所 支持 的 格式 。 如 果 找 不 到 现成 的 转换 工具 ， 那 么 为 了 完成 项 目 ， 你 可 能 需 
要 自行 编写 一 个 。 

幸运 的 是 这 种 情况 正在 快速 转变 。Three.js 和 其 他 WebGL 库 在 导入 专业 工具 创建 的 3D 内 
容 这 方面 表现 得 越 来 越 强 大 。 业 界 还 齐心 协力 创建 了 专 供 Web 使 用 的 3D 文件 格式 标准 。 
虽然 从 整体 来 说 模式 依旧 比较 原始 ， 但 对 比 几 年 前 ，WebGL 内 容 的 开发 可 以 说 已 经 从 粗 
放 的 “石器 时 代 ” 完 成 了 向 至 少 有 可 用 工具 的 “青铜 时 代 ” 的 跨越 。 

本 章 涵盖 了 Web 3D 内 容 的 开发 流程 。 首 先 ， 我 们 会 通 览 内 容 创建 的 过 程 。 如 果 你 对 3D 
创作 不 熟悉 ， 那 这 部 分 内 容 对 你 来 说 会 非常 有 用 。 其 次 我 们 会 大 体 了 解 现 今 WebGL 项 目 
中 使 用 的 流行 建 模 和 动画 工具 ， 并 深入 研究 最 适合 用 于 Web 开发 的 3D 文件 格式 细节 。 最 
后 ， 我 们 会 学 习 使 用 Three.js 的 通用 工具 将 这 些 文件 加 载 进来 ， 为 后 续 章 节 的 项 目 做 准 


8.1 3D 内 容 创建 过 程 


3D 内 容 的 创建 涉及 一 系列 高 度 专业 化 的 学 科 。3D 工作 者 的 整个 职业 生涯 需要 广泛 的 培训 
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以 及 对 复杂 创作 工具 和 流程 的 深入 理解 。 一 名 3D 艺术 家 通常 需要 负责 所 有 的 事情 ， 包 括 
建 模 、 纹 理 映 射 以 及 动画 。 但 有 时 候 ， 尤 其 是 在 比较 大 的 项 目 中 ， 人 们 会 进行 分 工 。 


3D 内 容 的 创建 在 很 多 方面 与 使 用 Photoshop 或 Illustrator 来 创建 2D 艺术 作品 相 类 似 。 但 
3D 创作 和 2D 艺术 作品 的 创建 有 一 些 本 质 上 的 不 同 。 即 便 你 是 一 名 技术 人 员 ， 当 你 打算 开 
发 一 个 3D 项 目的 时 候 ， 最 好 还 是 对 被 导入 到 项 目 中 的 内 容 的 产 出 过 程 有 一 定 的 了 解 。 怀 
着 这 个 目的 ， 让 我 们 来 看 看 3D 内 容 创 建 过 程 中 的 基本 步骤 。 


8.1.1 建 模 


在 3D 模型 的 创作 中 ， 通 常 先 由 艺术 家 绘制 一 个 草图 。 然 后 使 用 建 模 软件 包 将 草图 转换 为 
3D 数字 表现 。 模 型 通常 用 3D 多 边 形 网 格 来 表示 ， 首 先 通过 线 框图 来 绘制 ， 然 后 使 用 材质 
来 着 色 。 这 个 过 程 被 称 为 3D 建 模 (3D modeling)。 专 门 从 事 这 项 工作 的 人 被 称 为 建 模 师 
(modeler)。 图 8-1 描绘 了 一 个 由 Autodesk 3ds Max 创建 的 简单 茶壶 模型 。 我 们 可 以 从 四 个 
不 同 的 视图 观察 该 模型 顶部、 左边 、 前 面 和 透视 图 。 









































图 8-1: 3ds Max 中 的 3D 建 模 , 有 项 部、 左边 、 前 面 和 透视 图 四 个 视图 ; 图 片 版 权 为 Autodesk 所 有 ， 
来 自 维基 百科 词 条 (http://en.wikipedia.org/wiki/File:3dsmax_2010_800px.png) 


8.1.2 纹理 映射 


纹理 映射 (texture mapping， 也 称 为 纹理 贴图 ) ， 也 被 称 为 UV 映射 (UV mapping， 也 称 为 
UV 贴图 )， 是 将 创建 好 的 2D 素材 展开 附着 到 3D 物体 表面 上 的 过 程 。 建 模 师 通常 会 自己 
进行 纹理 映射 ， 但 在 比较 大 的 项 目 中 ， 贴 图 这 项 职责 可 能 会 被 划分 出 来 ， 由 专门 的 贴图 师 
(texture artist) 来 负责 。 纹 理 映 射 一 般 由 内 建 在 建 模 软件 包 中 的 可 视 化 工具 来 辅助 完成 。 
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这 类 工具 让 贴图 师 可 以 通过 可 视 化 的 方式 将 2D 纹理 图 和 网 格 中 的 顶点 关联 起 来 并 预览 家 
果 。 图 8-2 描绘 了 纹理 映射 。 图 的 左边 是 纹理 ， 结 合 视 图 在 右 下 方 ， 可 以 看 到 图 片 数据 覆 
盖 在 顶点 的 位 置 上 ; 预览 效果 在 右上 方 。 注 意 左 边 的 纹理 图 布局 有 点 违反 直觉 ， 只 显示 了 
半边 脸 。 这 是 因为 对 于 这 个 纹理 映射 来 说 ， 左 右 脸 是 一 样 的 。 这 个 策略 允许 贴图 师 在 较 小 
的 空间 里 放 更 多 的 数据 ， 并 且 使 用 图 片 的 其 他 部 分 来 增加 更 多 细 证 。 












































图 8-2: 纹理 映射 一 一 一 个 2D 图 像 包 应 并 映射 到 一 个 3D 物体 的 表面 ， 图 片 由 Simon Wottge 提供 


(http://www.simonwottge.com/?cat=13) 


8.1.3 动画 


创建 3D 动画 的 过 程 可 以 很 简单 也 可 以 极其 复杂 ， 这 取决 于 任务 本 身 。 关 键 帧 动画 往往 比 
较 简 单 ， 至 少 从 理论 上 来 说 是 这 样 的 。 界 面 可 能 会 难以 使 用 且 视 觉 上 杂乱 。 一 个 关键 帧 编 
辑 器 ， 就 像 图 8-3 Autodesk Maya 展示 的 那样 ， 包 含 一 套 时 间 轴 控制 器 (在 Maya 窗口 底部 
使 用 和 矩形 高 亮 部 分 )， 它 允许 动画 师 在 视图 中 移动 或 改变 物体 ， 然 后 在 时 间 轴 上 点 击 来 创 
建 关键 帧 。 关 键 帧 可 以 用 来 改变 变换 、 旋 转 、 缩 放 ， 甚 至 是 光线 及 材质 属性 。 当 动画 师 需 
要 在 关键 帧 中 定义 多 个 属性 的 变换 时 ， 他 需要 在 动画 时 间 轴 上 增加 额外 的 轨道 。 动 画师 在 
界面 中 通过 堆 县 的 方式 排列 这 些 轨道 ， 这 会 导致 视觉 上 的 混乱 。 

对 有 蒙 皮 的 角色 进行 动画 会 牵涉 更 多 的 工作 。 在 可 以 给 角色 设置 动画 前 ， 需 要 先 创建 一 系 
列 的 骨骼 ， 也 被 称 为 骨架 (rig)。 骨 架 决 定 了 蒙 皮 跟 随 骨 骼 移动 时 的 各 种 特性 。 创 建 骨架 
的 过 程 是 需要 专业 技巧 的 ， 角 色 的 动画 及 骨架 经 常 由 不 同 的 动画 师 完 成 。 















































图 8-3: Maya 的 动画 时 间 轴 工具 ， 具 有 对 变换 、 旋 转 、 缩 放 及 其 他 属性 变换 的 关键 帧 的 控制 ， 图 片 
来 自 UCBUGG Open Course Ware (http://ucbugg.github.io/learn.ucbugg/introduction-to- 
maya/) 


8.1.4 技术 美工 

我 们 可 能 没 想到 编程 也 是 内 容 创建 活动 的 一 部 分 ， 但 在 3D 开发 领域 ， 它 通常 是 。 复 杂 的 
特殊 效果 ， 比 如 某 些 着 色 器 和 后 期 技术 处 理 ， 需 要 有 经 验 的 程序 员 来 完成 。 在 游戏 和 动画 
公司 里 ， 这 些 工 作 被 交 给 技术 美工 (technical artist) 或 技术 总 监 (technical director) 来 做 。 
对 于 这 些 职 位 并 没有 一 个 正式 的 定义 ， 在 这 两 个 职位 间 也 没有 严格 的 区 别 。 但 根据 名 字 来 
判断 ， 技 术 总 监 通 常 是 更 资深 和 有 经 验 的 人 。 技 术 总 监 需 要 写 脚本 、 给 角色 创建 骨架 、 写 
转换 程序 来 将 一 种 格式 转 成 另 一 种 格式 、 实 现 特殊 的 效果 、 开 发 着 色 器 ， 换 句 话 来 说 就 是 
所 有 那些 对 于 视觉 设计 师 来 说 太 过 于 技术 化 的 工作 。 这 是 高 度 有 价值 的 技能 ， 对 于 许多 产 
品 来 说 ， 一 个 好 的 技术 总 监 价值 连城 。 

因为 技术 总 监 主要 靠 写 代码 为 生 ， 他 们 所 使 用 的 工具 通常 是 文本 编辑 器 。 但 是 ， 现 在 有 些 
有 趣 的 可 视 化 开发 工具 供 开 发 着 色 器 和 特殊 效果 使 用 。 其 中 之 一 是 ShaderFusion， 一 个 最 
近 在 Unity 游戏 引擎 中 发 布 的 可 视 化 工具 。ShaderFusion 允许 开发 者 通过 定义 从 一 个 物体 
的 输出 (比如 时 间或 位 置 ) 到 另 一 个 物体 的 输入 〈 例 如 颜色 或 折射 ) 之 间 的 数据 流 来 开发 
着 色 器 。 它 的 界面 如 图 8-4 所 示 。 
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图 8-4: ShaderFusion (http://www.shaderfusionblog.com/)， 一 个 Unity3D 引 警 中 的 可 视 化 着 色 器 
编辑 器 


8.2 3D 建 模 和 动画 工具 


本 市 我 们 介绍 3D 设计 师 用 来 创建 内 容 的 流行 工具 。 既 有 传统 的 桌面 软件 产品 ， 能 够 满足 
不 同 层次 的 用 户 和 技能 ， 也 有 新 出 现 的 看 起 来 有 前 景 的 基于 HIML5 的 云 服务 工具 ， 其 中 
有 些 服务 是 免费 的 ， 而 有 些 通常 需要 每 月 付费 。 最 后 ， 设 计 师 还 可 以 从 一 些 在 线 网 站 下 载 
已 存在 的 模型 和 动画 ， 来 借用 其 他 同行 的 工作 成 果 。 


8.2.1 传统 3D 软 件 


大 部 分 时 候 ，3D 内 容 创建 是 在 数字 内 容 创 建 (Digital Content Creation，DCC) 工具 中 完 
成 的 。3D DCC 工具 最 早出 现在 电影 制作 和 工程 领域 ， 现 在 被 广泛 用 于 建筑 设计 、 游 戏 开 
发 、 静 态 艺术 泻 染 及 更 多 领域 。 可 以 把 这 些 软件 类 比 为 3D 领域 的 Adobe Photoshop。 它 们 
在 Web 产品 流程 中 占据 了 类 似 的 位 置 : 作为 最 初 素材 的 来 源 ， 并 被 进一步 转换 、 优 化 和 集 
成 到 页 面 中 。 

3D DCC 工具 通常 是 操作 系统 的 本 地 应 用 ， 或 者 叫 “ 盒 装 软件 ”( 当 然 现 在 基本 上 是 从 开发 
者 的 网 站 上 下 载 的 )。3D DCC 工具 需要 专业 技能 ， 并 且 有 复杂 的 用 户 界面 和 陡峭 的 学 习 曲 
线 。 好 消息 是 越 来 越 多 的 数字 设计 师 在 学 校 及 早期 职业 培训 中 就 开始 学 习 这 些 工 具 了 。 像 
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常 驻 的 Photoshop 专家 一 样 ， 随 着 你 的 3D 项 目 不 断 发 展 ， 有 经 验 的 3D 设计 师 会 成 为 Web 
团队 中 的 一 员 。 


3D DCC 工具 的 价格 差别 很 大 ， 从 完全 免费 的 Blender， 到 每 个 许可 费 高 达 几 千 美 元 的 产 
品 ， 如 Autodesk 的 3ds Max 和 Maya。 这 些 工具 通常 会 包含 一 套 通 用 的 功能 ， 包 括 建 模 、 
贴图 、 动 画 ， 然而， 有 些 产 品 专 攻 这 些 领域 中 的 某 一 项 。 大 部 分 3D DCC 工具 内 置 了 导入 
器 和 导出 右 ， 能 够 导入 和 导出 我 们 待 会 将 会 介绍 的 标准 格式 。 它 们 还 有 某 些 形式 的 可 拓展 
性 ， 比 如 原生 (基于 C++ 的) SDK， 或 者 提供 高 级 语言 脚本 来 编写 插件 ， 以 增强 界面 ， 提 
供 自 定义 浑 染 ， 导 出 新 的 文件 格式 等 。 

接 下 来 对 广泛 使 用 的 建 模 及 动画 工具 进行 介绍 ， 你 也 许 会 在 开发 WebGL 项 目的 时 候 用 到 
它们 。 本 章 后 面 ， 我 们 会 研究 如 何 将 它们 中 的 一 些 集成 到 WebGL 内 容 创 建 流程 中 。 

1. Autodesk 3ds Max、Maya 以 及 MotionBuilder 

坐落 在 加 州 圣 拉 斐 尔 的 Autodesk 公司 ， 是 市 场 上 三 个 最 流行 的 建 模 及 动画 产品 的 制造 商 ， 
它们 分 别 是 : 3ds Max、Maya 和 MotionBuilder。MotionBuilder 主要 用 于 角色 动画 ，3ds 
Max 和 Maya 则 是 全 能 的 3D 工具 。3ds Max 和 Maya 在 功能 覆盖 方面 很 类 似 ， 所 以 对 于 新 
人 来 说 很 难 选 择 用 哪个 。 现 有 用 户主 要 根据 自己 的 喜好 、 工 作 流 程 的 偏好 等 因素 来 进行 先 
择 。 它 们 之 间 有 一 个 很 大 的 区 别 就 是 Maya 可 以 运行 在 Windows 和 Mac 上 ， 而 3ds Max 只 
支持 Windows。 这 三 个 产品 都 能 输出 Autodesk 公司 的 通用 格式 : FBX。 


为 什么 Autodesk 会 有 如 此 多 相似 的 产品 ”大 概 十 年 前 ， 这 个 公司 有 点 购物 
狂 ， 买 下 了 很 多 竞争 产品 ， 从 Alias Systems 公司 买 下 了 Maya， 从 Kaydara 
买 下 了 MotionBuilder。MotionBuilder 主要 用 在 角色 动画 上 ， 而 其 他 两 个 产 
品 则 有 相同 的 功能 。 在 Tom”s Hardware 网 站 上 有 一 篇 内 容 充实 的 文章 对 3ds 
Max 和 Maya 进行 了 比较 (http:/www.tomshardware.com/forum/247220-49- 


maya) 。 
















































































Autodesk 的 工具 有 着 复杂 的 用 户 界面 ， 有 大 量 控件 、 视 图 、 属 性 编辑 器 及 弹出 窗口 。 它 们 
是 完整 3D 开发 中 “工作 站 ”类 型 的 产品 。 界 面 通常 最 开始 是 像 图 8-1 的 3ds Max 截屏 那 
样 的 四 个 视图 ， 也 可 以 收缩 到 图 8-5 May 截图 那样 的 单一 场景 视图 。 这 些 产品 的 通用 功能 
包括 材质 编辑 器 、 创 建 基本 几何 体 的 工具 栏 、 绘 制 和 编辑 网 格 的 工具 、 动 画 时 间 轴 工具 、 
泻 染 揪 件 、 着 色 器 编辑 器 ， 等 等 。 

Autodesk 的 工具 是 为 专业 人 士 定 价 的 : 每 个 产品 大 概 3000~4000 美元 。 公 司 同时 还 提供 了 
基于 订阅 的 价格 ， 以 及 针对 学 生 和 学 习 者 的 版 本 。 
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8-5: Autodesk Maya， 一 个 完整 的 3D 建 模 及 动画 套件 ， 图 片 版 权 为 Autodesk 所 有 ， 来 自 维基 
百科 词 条 (https://en.wikipedia.org/wiki/File:Autodesk_Maya_2013_SP2_Extension_x64_ 
on_Win8.png) 





2. Blender 

Blender (http://www.blender.org/) 是 一 个 免费 、 开 源 且 跨 平 台 的 3D 创作 工具 。 它 可 以 运 

行 在 主流 的 操作 系统 上 ， 以 GNU GPL (General Public License， 通 用 公共 许可 证 ) 协议 的 

方式 授权 。Blender 是 由 荷兰 软件 开发 者 Ton Roosendaal 创建 的 ， 它 由 Blender 基金 会 维 

护 ， 这 是 荷兰 的 一 家 非 营 利 性 组 织 。Blender 非常 流行 ， 基 金 会 估计 有 两 百 万 用 户 。 它 的 

用 户 有 设计 师 和 工程 师 ， 从 业余 爱好 者 /学 生 到 专业 级 别 都 有 。 

像 3ds Max 及 Maya 那样 ，Blender 的 用 户 界面 复杂 ， 有 多 个 视图 、 工 具 栏 及 控件 ， 并 伴随 

着 陡峭 的 学 习 曲线 。 所 以 尽管 是 免费 的 ， 它 并 不 适合 意志 薄弱 的 人 。 尽 管 如 此 ，Blender 

对 Web 开发 者 而 言 是 一 个 有 吸引 力 的 选择 ， 有 以 下 几 个 原因 。 

。 它 是 免费 。 

。 它 是 开源 的 。 

。 它 可 以 使 用 Python 进行 扩展 。 

。 它 支 持 导入 和 导出 多 种 文件 格式 ， 包 括 3ds Max、OBJ、COLLADA 和 FBX。Three.js 
开发 者 也 开发 了 一 个 从 Blender 导出 到 Three.js JSON 格式 的 工具 (本 章 后 面 会 介绍 ) 。 

3. Trimble SketchUp 

一 个 中 级 3D DCC 工具 是 SketchUp (官方 叫 法 是 Trimble SketchUp) ， 它 是 一 个 易于 使 用 的 

3D 建 模 工具 ， 可 用 于 建筑 架构 、 工 程 ， 有 时 也 用 于 游戏 开发 。 


SketchUp 的 历史 很 有 趣 。 它 最 开始 由 @Last 软件 公司 于 1999 年 开发 ， 后 来 得 到 了 Google 
Earth 团队 的 注意 ， 他 们 基于 @Last 的 工作 开发 了 一 个 系统 插件 。 而 后 ，Google 在 2006 
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年 收购 了 @Last。 多 年 来 ，SketchUP 被 推广 为 Google Earth 中 用 户 创建 3D 建筑 及 地 标的 
工具 。SketchUp 还 有 一 个 姊妹 网 站 一 一 3D Warehouse， 一 个 由 业余 创作 者 上 传 和 分 享 3D 
模型 的 在 线 仓 库 。2012 年 ，Google 决定 退出 经 营 用 户 生 成 3D 内 容 的 相关 业务 ， 然 后 将 
SketchUp 卖 给 了 Trimble Navigation， 一 家 位 于 加 州 的 GPS 系统 制造 商 。Trimble 继续 发 布 
SketchUp 和 维护 3D Warehouse， 但 它 不 再 用 来 为 Google Earth 生成 内 容 。 


SketchUp 运行 在 所 有 平台 上 。 它 的 价格 很 合理 ， 专 业 版 大 概 500 美元 。 还 有 一 个 针对 业余 
用 户 的 完全 免费 版 。SketchUp 因 易 于 使 用 而 被 熟知 ， 它 使 用 了 基于 线条 绘制 的 方法 来 建 
模 ， 这 对 架构 师 和 工程 师 很 有 用 。SketchUp 具有 优秀 的 COLLADA 导出 能 力 (请 查看 8.3 
节 中 的 “COLLADA: 数字 资源 交换 格式 ”)， 所 以 它 可 能 是 WebGL 开发 一 个 不 错 的 选择 。 
SketchUp 可 以 从 它 的 官方 网 站 (http://www.sketchup.com/) 上 下 载 。 





4. Poser 

Smith Micro 的 Poser 是 一 个 中 级 角色 动画 工具 。 像 SketchUp 那样 ， 它 的 价格 足够 吸引 人 ， 
而 且 目 标 用 户 是 业余 内 容 创 作者 。Poser 有 着 直观 的 用 户 界 面 来 对 角色 进行 姿势 摆 放 和 动 
画 。 它 有 一 个 庞大 的 库 ， 包 含 已 经 建 好 模型 、 骨 架 、 带 完整 贴图 的 人 物 和 动物 角色 ， 以 及 
一 系列 背景 场景 、 道 具 、 载 体 、 相 机 和 光照 设置 。Poser 可 以 用 来 创建 相片 般 真 实 的 静态 
泻 染 和 实时 动画 。Poser 的 用 户 界面 请 查看 图 8-6。 





Untitled - Smith Micro Poser 


[al 
Fie Edt Fyre Objct Deplay Render Anenstion Wndow Scrpts Hop 


Right €: 


Hiiiiii 














图 8-6: Poser 的 用 户 界 面 (http://poser.smithmicro.com/) ;图 片 来 自 Smith Micro Software 公司 


在 所 有 讨论 过 的 软件 里 ，Poser 值得 一 提 的 是 它 的 开发 团队 从 COLLADA 文件 格式 发 展 
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初期 ， 就 很 积极 地 参与 它 的 创建 ， 同 时 这 个 团队 还 积极 和 Khronos 组 织 合作 开发 新 的 标 
准 : gITFE， 我 们 将 在 本 章 后 面 进行 讨论 。Poser 团队 对 标准 格式 很 赞同 ， 把 它 当 成 一 种 能 
让 3D 内 容 得 到 广泛 支持 的 方式 ， 尤 其 是 在 Web 环境 中 。Smith Micro 的 高 级 工程 总 监 Uli 
Klumpp 就 在 WebGL 中 使 用 Poser 说 了 以 下 这 段 话 : 


支持 WebGL 的 应 用 和 支持 其 他 格式 的 应 用 并 没有 什么 不 同 ， 都 需要 描绘 人 体形 式 
(或 明确 的 非 人 体形 式 )。Web 设计 师 从 20 世纪 90 年 代 就 开始 使 用 Poser 来 证 明 这 一 
点 。 他 们 终于 获得 了 一 个 无 处 不 在 的 3D 内 容 展示 场所 ， 而 Poser 巨大 的 内 容 库 已 经 
准备 好 了 。 


8.2.2 ”基于 浏览 器 的 集成 环境 

HMTL5 及 廉价 云 计 算 的 出 现 为 新 的 DCC 工具 一 一 基于 浏览 器 的 集成 3D 开发 环境 一 一 的 
诞生 创造 了 条 件 。 建 模 和 动画 依然 在 之 前 提 到 的 本 地 工具 中 创建 ， 但 场景 布局 、 交 互 编程 
和 Web 发 布 可 以 在 浏览 器 界面 中 进行 。 

基于 浏览 器 的 环境 提供 了 与 它们 的 桌面 对 手 不 一 样 的 独特 特性 。 首 先 ， 显然 ， 它 不 需要 下 
载 ， 其 次 ， 它 们 本 身 就 是 用 WebGL 开发 的 ， 所 以 可 以 提供 与 部 署 后 效果 一 样 的 所 见 即 所 
得 环境 。 基 于 浏览 器 的 工具 通常 会 有 吸引 人 的 价格 ， 并 使 用 增值 收费 的 模式 ， 人 允许 开 始 使 
用 的 时 候 免 费 ， 只 有 当 开 发 者 进行 商业 化 的 时 候 才 收费 ， 比 如 开发 一 个 团队 项 目 ， 或 者 使 
用 的 文件 存储 超过 一 定 上 限 。 这 是 一 个 全 新 且 不 断 变革 的 领域 ， 所 以 开发 者 可 以 期 待 在 接 
下 来 的 几 年 里 一 个 Web 风格 的 持续 收费 模式 及 价格 。 

1. Verold 

Verold Studio 是 一 个 轻 量 级 3D 交互 内 容 发 布 平 台 ， 由 位 于 多 伦 多 的 Verold 公司 开发 。 它 不 
需要 依赖 插件 ， 可 以 使 用 简单 的 JavaScript API 进行 扩展 ， 因 此 业余 爱好 者 、 学 生 、 老 师 、 
可 视 化 通信 专业 人 员 以 及 Web 市 场 人 员 可 以 简单 地 将 3D 动画 内 容 集成 到 他 们 的 Web 中 。 


典型 的 Verold 工作 流程 需要 一 个 CG 设计 师 上 传 相关 的 资料 (3D 模型 、 动 画 、 纹 理 ) 到 
一 个 Verold 项 目 中 。 协 同 工 具 可 以 用 来 提供 资料 的 反馈 ， 编 辑 工 具 可 以 用 来 建立 材质 及 着 
色 器 ， 并 布置 到 场景 /关卡 中 。 当 团队 对 资料 设置 结果 满意 后 ，Web 设计 师 可 以 导出 样 例 
代码 到 目标 页 面 中 。 这 个 工作 流程 适合 很 多 场景 ， 无 论 是 与 开发 者 和 CG 设计 师 坐 在 一 起 ， 
还 是 远程 协作 ， 抑 或 是 有 些 场景 下 的 资料 是 买 来 的 而 不 是 自己 开发 的 都 行 。Verold Studio 
的 用 户 界 面 如 图 8-7 所 示 。 注 意 它 基于 浏览 器 的 简洁 设计 ， 这 与 传统 复杂 的 DCC 工具 形成 
鲜明 对 比 。 


Verold 可 以 实时 协作 编辑 、 线 上 发 布 以 及 共享 内 容 ， 开 局 了 3D 项 目 开发 的 新 方式 。 来 看 
看 创始 人 及 CTO Ross McKegney 的 说 法 : 


一 个 使 用 Verold Studio 的 好 案例 是 Swappz Interactive 公司 。Swappz 为 “忍者 神 鱼 : 变种 
时 代 ”“ 蓝 精灵 ”“ 念 龙 战队 ”等 品牌 创造 玩具 。 这 些 玩具 有 点 特别 ， 它 们 可 以 被 相关 的 
移动 游戏 “扫描 ”进去 。Swappz 在 开发 过 程 中 使 用 了 Verold， 用 来 保证 跨 境 的 角色 设计 
师 及 当地 的 动画 师 之 间 能 够 相互 反馈 、 为 总 公司 显示 进度 、 从 Nickelodeon 公司 获得 使 用 
资源 的 许可 ， 以 及 最 终 当 游戏 准备 好 发 布 的 时 候 ， 将 游戏 资源 用 在 游戏 推广 网 站 上 。 
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图 8-7: Verold Studio (http://www.verold.com) 


2. Sketchfab 

另 一 类 在 线 3D 工具 提供 了 上 传 并 分 享 的 服务 。3D 设计 师 可 以 上 传 几 种 格式 的 3D 模 
型 ， 使 用 WebGL 来 在 线 预览 和 分 享 。 这 其 中 开发 最 完善 的 是 Sketchfab (http://sketchfab. 
com/) ， 它 由 位 于 巴黎 的 团队 开发 ， 团 队 创 始 人 有 Cédric Pinson、Alban Denoyel 和 Pierre- 
Antoine Passet。Sketchfab 是 一 个 实时 发 布 和 共享 交互 式 3D 模型 的 在 线 服 务 ， 它 不 需要 插 
件 。 只 需 点 击 几 下 ， 设 计 师 就 可 以 上 传 一 个 3D 模型 到 网 站 上 ， 获 得 一 段 HTML 代码 ， 它 
可 以 嵌入 到 其 他 地 方 ， 展 现 的 时 候 使 用 Sketchfab 提供 的 服务 来 进行 泻 染 。 


Sketchfab 支持 几 种 原生 的 3D 格式 ， 以 及 大 部 分 着 色 器 ， 包 括 法 向 量 贴图 、 镜 面 反 射 、 四 
山 贴图 、 漫 反射 等 。Sketchfab 同样 提供 了 一 个 材质 编辑 器 ， 让 设计 师 能 够 在 浏览 器 中 实时 
调整 着 色 器 和 泻 染 效果 。 它 还 开发 了 主流 本 地 DCC 工具 的 导出 器 ， 模 型 可 以 直接 从 编辑 
工具 (比如 Maya) 中 导出 ， 这 样 会 更 方便 些 。Sketchfab 的 首页 如 图 8-8 所 示 。 页 面 中 主 
要 区 域 的 图 像 实 际 上 是 Sketchfab 库 中 的 一 个 模型 ， 使 用 了 WebGL 泻 染 。 

3. SculptGL 
由 于 3D 泻 染 和 用 户 界面 的 限制 ， 儿 年 前 开发 在 浏览 器 中 进行 3D 建 模 的 工具 是 不 可 想 
象 的。 但 现在 有 了 HTML5 和 WebGL， 这 个 想法 就 再 不 苑 诞 了 。Stephane Ginier 开发 了 
SculptGL， 一 个 基于 Web 的 实体 建 模 工 具 ， 其 界面 简单 易 用 ， 可 用 来 创建 简单 的 、 雕 塑 风 
格 的 模型 。SculptGL 是 免费 且 开 源 的 ， 可 以 在 GitHub 上 找到 ， 地 址 是 https://github.com/ 
stephomi/sculptgl。SculptGL 可 以 导出 多 种 格式 ， 并 可 直接 发 布 到 Verold 和 Sketchfab 上 。 
SculptGL 的 界面 如 图 8-9 所 示 。 
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8-8: Sketchfab 网 站 (http:/sketchfab.com/) 允许 内 容 创建 者 上 传 并 分 享 可 以 实时 浏览 的 3D 模型 





8-9: SculptGL (http://stephaneginier.com/sculptgl/) ， 一 个 基于 浏览 器 的 开源 3D 模型 工具 


4. Shadertoy 

类 似 JSFiddle (http://jsfiddle.net/) 那样 的 Web 上 的 “ 沙 箱 工 具 ” 越 来 越 流行 。JSFiddle 
允许 开发 者 在 浏览 器 中 测试 代码 ， 并 实时 预览 效果 。 鉴 于 此 ， 必 然 也 会 有 人 开发 用 于 
WebGL 的 类 似 沙 箱 工 具 。Shadertoy (https://www.shadertoy.com/)) 是 一 个 基于 浏览 器 的 
代码 工具 ， 它 可 以 编写 和 测试 GLSL 着 色 器 。 它 包括 沙 箱 和 在 线 社区 。 一 旦 一 个 着 色 器 
编写 完成 并 测试 通过 ， 它 就 可 以 被 提交 到 Shadertoy 网 站 上 供 人 发 现 并 使 用 。 这 是 一 个 学 
习 GLSL 着 色 器 编写 的 好 方式 ， 你 可 以 模仿 其 他 人 的 工作 。 当 一 个 着 色 器 开发 好 后 ， 你 可 
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以 通过 Shadertoy 网 站 来 分 享 ， 或 者 将 GLSL 代码 复制 到 你 的 应 用 源码 中 。 图 8-10 展示 了 
Shadertoy 的 界面 ， 它 包括 一 个 实时 预览 框 、 一 个 代码 编辑 框 、 一 个 选择 着 色 器 来 源 的 交互 
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图 8-10: Catacombs 一 一 一 个 使 用 过 程 纹理 的 Shadertoy 实验 (https:/www.shadertoy.com/view/ 
lsf3zr) 


8.2.3 3D 内 容 仓 库 和 现成 素材 


并 不 是 所 有 人 都 有 3D 建 模 的 才能 ， 并 且 由 于 项 目 预算 和 时 间 的 限制 ， 我 们 无 法 一 下 子 招 
到 合适 的 人 。 好 在 还 有 不 错 的 3D 内 容 在 线 资源 ， 类 似 于 3D 版 本 的 “剪贴 图 集 *。 模 型 和 
内 容 包 的 价格 从 免费 到 几 百 其 至 儿 千 美元 不 等 ， 质量 也 千差万别 。 有 些 创作 者 允许 无 限制 
的 使 用 ， 而 有 些 则 有 所 限制 。 注 意 好 好 查看 授权 许可 ， 尤 其 是 开发 在 线 传播 的 Web 应 用 。 
为 了 给 这 本 书 创建 3D 内 容 ， 我 们 使 用 了 许多 不 同 在 线 资 源 的 模型 ， 列 举 如 下 。 
。 The Trimble 3D Warehouse (http://sketchup.google.com/3dwarehouse/) 
3D Warehouse 最 早 由 Google 开发 ， 用 于 支持 业余 爱好 者 上 传世 界 建筑 和 地 标的 
SketchUp 模型 ， 并 在 Google Earth 中 标注 它 的 位 置 。Trimble 收购 SketchUp 后 ， 这 个 服 
务 不 再 用 于 Google Earth， 但 依然 是 一 个 优秀 的 已 泻 染 建筑 和 其 他 3D 物体 的 重要 来 源 。 
。 Turbosquid (http:/www.turbosquid.com/) 
Turbosquid 成 立 于 2000 年 ， 是 包含 成 千 上 万 个 模型 的 一 流 网 站 ， 这 些 模型 用 在 动画 、 
游戏 及 建筑 架构 中 。 许 多 模型 的 多 边 形 数 量 为 少 或 中 ， 对 于 实时 泻 染 及 Web 很 适用 。 
。 Renderosity (http://renderosity.com/) 
Renderosity 成 立 于 1998 年 ， 是 一 个 多 样 化 的 社区 ， 有 许多 2D 和 3D 的 创意 专家 。 这 个 
网 站 有 许多 模型 和 纹理 。 它 主要 专注 于 用 于 预 谊 染 静态 图 像 的 高 多 边 形 模型 ， 而 不 是 用 
于 实时 泻 染 的 低 多 边 形 模 型 。 
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。 3DRT.com 
3DRT 是 一 个 严谨 的 在 线 商 店 ， 它 有 用 于 实时 游戏 及 Web 的 高 质量 3D 素材 。 这 个 网 站 
的 组 织 形 式 可 以 方便 专业 人 士 查 找 角 色 、 载 体 、 道 具 及 环境 模型 。 这 些 模型 都 不 便宜 ， 


但 质量 高 。 


8.3 ”3D 文件 格式 


这 些 年 出 现 了 许多 3D 文件 格式 ， 多 到 无 法 在 这 里 全 部 介绍 完 。 有 些 3D 格式 是 某 个 3D 软 
件 自己 用 的 ， 有 些 格式 是 用 于 在 多 个 软件 间 交 换 数据 的 。 有 些 格 式 是 私有 的 ， 也 就 是 说 被 
某 个 公司 或 软件 厂商 完全 控制 ， 有 些 则 是 由 一 个 工业 小 组 开发 的 开放 标准 。 有 些 格式 是 基 
于 文本 的 ， 所 以 可 读 ， 有 些 则 为 了 市 省 空间 使 用 二 进 制 格式 。 

3D 文件 格式 有 三 种 分 类 : 模型 格式 ， 用 于 表示 单个 模型 ， 动 画 格式 ， 用 于 动画 的 关键 帧 
和 角色 定义 ， 全 功能 格式 ， 包 含 整个 场景 ， 以 及 其 中 的 多 个 模型 、 变 换 层 级 结构 、 相 机 、 
光源 及 动画 。 我 们 会 研究 每 种 类 型 的 格式 ， 并 重点 研究 适合 Web 应 用 的 格式 。 


8.3.1 模型 格式 

单个 模型 的 3D 格式 经 常用 来 在 不 同 的 3D 软件 中 交换 数据 。 比 如 大 部 分 3D 软件 都 能 导入 
和 导出 OBJ 格式 〈 接 下 来 会 介绍 ) 。 因 为 它 语 法 简单 且 功 能 比较 少 ， 所 以 支持 它 很 容易 ， 
因此 很 流行 。 然 而 ， 这 也 使 得 它 所 支持 的 功能 不 多 。 

1. Wavefront OBJ 

OBJ 文件 格式 由 Wavefront 公司 开发 ， 它 是 业界 最 早 也 是 支持 最 广泛 的 单一 模型 格式 。 它 
非常 简单 ， 只 支持 几何 体 (有 顶点 、 法 线 及 贴图 坐标 )。Wavefront 还 引入 了 一 个 辅助 的 
MTL (Material Template Library， 材 质 模 板 库 ) 格式 来 支持 给 模型 附 上 材质 。 


例 8-1 展示 了 一 个 基本 的 OBJ 文件 ， 它 是 从 经 典 的 “太空 椅 ” 模 型 中 摘录 出 来 的 。 这 个 
模型 我 们 在 后 面 的 章节 会 使 用 Three.js 加 载 进 来 (效果 见 图 8-12)。OBJ 文件 及 相关 代码 
在 models/ball_chair/ball_chair.obj 中 ， 让 我 们 看 看 它 的 语法 。 甚 中 # 字符 用 作 注 释 定 界 符 。 
这 个 文件 包含 一 系列 的 声明 。 第 一 个 声明 是 引用 它 所 关联 的 材质 库 MTL 文件 。 然 后 定义 
了 儿 个 几何 体 。 这 个 摘录 显示 了 用 于 定义 名 为 shell 的 对 象 的 一 部 分 数据 ， 它 是 太空 椅 的 
外 壳 。 我 们 通过 每 行 一 条 信息 的 方式 ， 使 用 顶点 位 置 、 法 线 及 贴图 坐标 数据 来 定义 这 个 外 
壳 。 接 下 来 是 面 的 数据 ， 同 样 是 每 个 面 一 行 。 每 个 面 的 顶点 通过 类 型 为 v/vt/vn 的 三 个 数 
来 定义 ， 其 中 v 是 顶点 位 置 数据 ，vt 是 纹理 坐标 数据 ， 而 vn 是 顶点 法 线 数据 。 

例 8-1: 一 个 Wavefront OBJ 格式 的 模型 

# 3ds Max Wavefront 0B] Exporter vO.97b - (c)2007 guruware 


































































































# File Created: 20.08.2013 13:29:52 


mtllib ball_chair.mtl 
# 

# object shell 

# 





-15.693047 49.273174 -15.297686 
-8.895294 50.974277 -18.244076 
-0.243294 51.662109 -19.435429 

















.其 他 顶点 位 置信 息 








vn -0.537169 0.350554 -0.767177 
vn -0.462792 0.358374 -0.810797 
vn -0.480322 0.274014 -0.833191 





.…， 其 他 顶点 法 向 量 信 息 

vt 0.368635 0.102796 0.000000 
vt 0.348531 0.101201 0.000000 
vt 0.349342 0.122852 0.000000 
..， 其 他 纹理 坐标 信息 
g shell 
usemtl shell 
s”1 
































f 313/1/1 600/2/2 58/3/3 597/4/4 

f 598/5/5 313/1/1 597/4/4 109/6/6 

f 313/1/1 598/5/5 1/7/7 599/8/8 

f 600/2/2 313/1/1 599/8/8 106/9/9 

f 314/10/10 603/11/11 58/3/3 600/2/2 





.其 他 面 片 定义 


太空 椅 辅 助 的 材质 定义 在 models/ball_chair/ball_chair.mtl 这 个 MTL 文件 中 。 它 的 语法 非 
常 简单 ， 见 例 8-2。 一 个 材质 通过 newmtt 语句 来 定义 ， 它 包含 了 使 用 Phong 着 色 的 一 些 








参数 ， 包 括 高 光 反 射 颜色 和 系数 (Ks、Ns 和 Ni 关键 





， 漫 反射 颜色 (Kd)、 环 境 颜 色 





(Ka)、 发 光 颜 色 (Ke) 和 纹理 贴图 (map_Ka 及 Map_kd) 。MTL 中 的 纹理 贴图 经 过 儿 年 的 发 


展 ， 包 括 了 凹凸 贴图 、 置 换 贴 柜 




















到 及 其 他 类 型 的 纹 到 














只 定义 了 环境 贴图 和 漫 反射 贴图 。 











例 8-2: OBJ 格式 的 材质 定义 
newmtl shell 

Ns 77.000000 

Ni 1.500000 


Tf 1.000000 1.000000 1.000000 


illum 2 











Ka 0.000000 0.000000 0.000000 
Kd 0.588000 0.588000 0.588000 
Ks 0.720000 0.720000 0.720000 
Ke 0.000000 0.000000 0.000000 
map_Ka maps\shell_color.jpg 
map_Kd maps\shell_color.jpg 


2. STL 





EE。 在 这 个 例子 中 ，shell 纹理 





另 一 个 基于 文本 的 简单 单一 模型 格式 是 STL (StereoLithography)， 它 被 开发 用 于 3D 系统 
的 快速 原型 、 制 造 业 及 3D 打印 。STL 格式 比 OBJ 更 简单 。 这 个 格式 只 支持 顶点 几何 ， 不 
支持 法 线 、 纹 理 坐 标 及 材质 。 例 8-3 展示 了 一 小 段 STL 文件 代码 ， 它 来 自 Threejjs 的 一 
个 例子 (examples/models/stl/pr2_head_pan.stl)。 可 以 打开 Three.js 中 的 examples/webgl_ 
loader_stl.html 来 查看 它 运行 时 的 样子 。STL 是 基于 WebGL 开发 在 线 3D 打印 应 用 的 不 错 
格式 ， 因 为 它 能 直接 发 到 3D 打印 设备 上 。 另 外 ， 它 容易 加 载 ， 且 演 染 速度 快 。 
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例 8-3: STL 文件 格式 
solid MYSOLID created by IVCON, original data in binary/pr2_head_pan.stl 
facet normal -0.761249 0.041314 -0.647143 
outer loop 
vertex -0.075633 -0.095256 -0.057711 
vertex -0.078756 -0.079398 -0.053025 
vertex -0.074338 -0.088143 -0.058780 
endLoop 
endfacet 


endsolid MYSOLID 
STL 是 如 此 简单 和 流行 ，GitHub 已 经 增加 了 直接 查看 它 的 支持 (https:/ 


github.com/blog/1465-stl-file-viewing)。 这 个 查看 器 是 使 用 Three.js 基于 
WebGL 开发 的 。 


STL 格式 的 技术 细节 可 以 参考 维基 百科 (http://en.wikipedia.org/wiki/STL_% 
28file_format%29 ) 。 























8.3.2 ”动画 格式 

前 面 一 节 描 述 的 格式 只 能 用 来 表示 静态 模型 数据 。 但 大 部 分 3D 应 用 中 的 内 容 在 屏幕 上 都 
是 会 动 的 〈 即 被 动画 了 )。 有 几 种 专门 用 来 表示 动态 模型 的 格式 ， 包 括 基于 文本 (因此 对 
Web 友好 ) 的 MD2、MD5 及 BVH 格式 。 


1. id Software 动 画 格式 : MD2 和 MD5 

你 会 时 不 时 在 Web 上 看 到 用 于 id Software 的 流行 游戏 DOOM 和 Ouake 的 专 有 格式 。MD2 
及 它 后 续 的 MD5 格式 ， 是 用 来 定义 角色 动画 的 。 这 个 格式 被 id Software 所 控制 ， 他 们 很 
早 就 公布 了 这 个 格式 的 规范 ， 并 且 有 许多 工具 支持 导入 它们 。 

MD2 格式 是 为 Quake 了 创建 的 ， 是 一 种 二 进 制 格式 。 它 支持 仅 通过 变形 目标 实现 的 基于 顶 
点 的 角色 动画 。MD5 (不 要 和 在 Web 中 广泛 使 用 的 加 密 散 列 函数 “消息 摘要 ”算法 弄 混 
了 ) 是 为 Quake I 开发 的 ， 它 引入 了 蒙 皮 动 画 ， 并 且 是 基于 文本 的 可 读 格 式 。 

MD2 (http://tfc.duke.free.fr/coding/md2-specs-en.html) 和 MD5 (http://tfe.duke.free.fr/coding/ 
md5-specs-en.html) 规范 的 相关 文档 可 以 在 网 上 找到 。 

要 在 WebGL 应 用 中 使 用 这 些 格式 ， 我 们 可 以 自己 编写 一 个 加 载 器 来 直接 读 取 它 们 ， 或 
者 如 果 使 用 Three.js 那样 的 库 ， 我 们 可 以 使 用 转换 工具 。 如 果 将 MD2 文件 转 成 JSON 格 
式 ， 它 看 起 来 就 像 第 5 章 中 的 例子 那样 ， 如 图 5-11 所 示 。 可 以 打开 文件 examples/webgl_ 
morphtargets_md2_control.htm 回顾 一 下 ， 看 一 看 它 的 源码 ， 你 会 发 现 加 载 和 解释 MD2 文 
件 需要 做 许多 事情 。 

Threejs 并 没有 在 它 的 例子 中 包含 MD5 的 加 载 器 。 但 有 一 个 不 错 的 在 线 转换 工具 可 以 
将 MD5 转 成 Three.js JSON 格式 ， 它 是 由 Klas (OutsideOfSociety) 开发 的 ，Klas 就 职 
于 瑞典 的 网 络 公 司 North Kingdom (Find Your Way to OZ 的 开发 团队 )。 要 查看 一 个 转换 
后 的 模型 ， 可 以 去 Klas 的 博客 。 打 开 这 个 链接 (http://0os.moxiecode.com/js_webgl/md5_ 
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example/) ， 你 可 以 看 到 一 个 非常 精细 的 怪物 模型 ， 可 以 控制 它 改变 几 种 不 同 的 姿势 动画 。 


如 果 要 转换 你 自己 的 MD5 文件 ， 可 以 打开 这 个 链接 (http:/oos.moxiecode.comyjs_webgl/ 
md5_converter/) ， 它 允许 你 拖 搜 一 个 MD5 文件 到 窗口 中 ， 然 后 输出 JSON 代码 。 


2. BVH: 动作 捕捉 数据 格式 
动作 捕捉 (motion capture) 是 一 种 记录 物体 运动 的 方式 ， 它 在 制作 人 体 动画 方面 非常 流 
行 。 在 电影 、 动 画 、 军 事 及 运动 应 用 中 广泛 使 用 。 动 作 捕 捉 得 到 了 开源 格式 的 广泛 支持 ， 
其 中 包括 Biovision Hierarchical Data (BVH)。BVH 由 Biovision 公司 开发 ， 用 于 表示 人 体 
的 运动 。BVH 非常 流行 ， 它 基于 文本 ， 有 很 多 工具 支持 导入 和 导出 它 。 

开发 者 Aki Miyazaki 做 了 一 个 将 BVH 数据 导入 到 WebGL 应 用 中 的 早期 尝试 。 他 的 BVH 
Motion Creator 是 一 个 基于 Web 的 BVH 预览 工具 ， 它 本 身 是 基于 Three.js 开发 的 ， 如 图 
8-11 所 示 。 借 助 这 一 工具 ， 使 用 者 可 以 上 传 BVH 文件 ， 预 览 它 在 简单 角色 上 的 动画 效 
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EE 











8-11: BVH Motion Creator (http://www.akjava.com/demo/bvhplayer/)， 一 个 BVH 格式 的 预览 
工具 


8.3.3 全 功能 的 场景 格式 


多 年 来 ， 业 界 开发 了 几 种 标准 格式 来 支持 表示 整个 3D 场景 ， 包 括 多 个 模型 、 变 换 层 级 结 
构 、 相 机 、 光 源 和 动画 ， 以 及 所 有 在 3ds Max、Maya、Blender 这 样 全 功能 的 软件 中 创造 
出 来 的 东西 。 总 之 ， 这 依旧 是 有 待 解决 的 复杂 的 技术 问题 ， 几 种 格式 存活 了 下 来 并 得 到 了 
广泛 使 用 。 但 局 势 可 能 会 有 所 改变 ， 因 为 WebGL 带动 了 新 的 需求 ， 尤 其 是 需要 在 应 用 间 
重用 数据 。 本 节 中 ， 我 们 会 研究 几 种 在 WebGL 中 有 可 能 使 用 的 格式 。 

1. VRML 和 X3D 

虚拟 现实 标记 语言 (Virtual Reality Markup Language，VRML) 是 最 初 用 于 3D Web 的 文本 
格式 ， 它 于 1994 年 由 发 明 家 和 理论 家 Mark Pesce、 硅 谷 图 形 公 司 (Silicon Graphics) Open 
Inventor 软件 团队 的 成 员 ， 以 及 我 所 组 成 的 小 组 创建 。VRML 在 20 世纪 90 年 代 经 历 了 几 
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次 迭代 ， 得 到 了 业界 以 及 一 个 非 营 利 组 织 标准 协会 的 支持 。 它 的 后 续 格 式 基于 XML， 在 
21 世纪 初 开发 出 来 ， 名 称 改 为 了 X3D。 尽 管 这 些 格式 在 Web 应 用 中 已 经 不 再 广泛 使 用 ， 


但 大 多 数 模型 工具 依然 支持 导入 和 导 H 





它们 。 





VRML 和 X3D 定义 了 完整 的 场景 、 动 画 (关键 帧 、 变 形 及 蒙 皮 ) 、 材 质 、 光 源 ， 甚 至 还 有 
脚本 化 了 的 、 具 有 行为 的 交互 式 物体 。 例 8-4 展示 了 X3D 语法 ， 它 创建 了 一 个 带 有 红色 
立方 体 的 场景 ， 当 鼠标 点 击 的 时 候 ， 它 会 绕 着 y 轴 做 2 秒 钟 的 360 旋转 。X3D 的 几何 体 、 
行为 及 动画 都 在 一 个 XML 文件 中 ， 直 观 且 可 读 性 好 。 直 到 今天 ， 还 没有 一 个 开放 的 3D 
文件 格式 可 以 用 如 此 简单 和 优美 的 语法 实现 同样 的 功能 (我 就 自 卖 自 夸 了 )。 


例 8-4: X3D 的 例子 ， 当 点 击 的 时 候 红色 立方 体会 旋转 











<?xml version="1.0" encoding="UTF-8" 











2 


<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN" 
"http://www.web3d.org/specifications/x3d-3.0.dtd"> 

<X3D profile='Interactive' version='3.0' 
xmlns:xsd='http://www.w3.0rg/2001/XMLSchema-instance' 


xsd:noNamespaceSchemaLocation = 


' http://www.web3d.org/specifications/x3d-3.0.xsd '> 


<head> 
. <!-- 此 外 为 X3D 文 件 的 XML meta 信 息 
</head> 


< 人 




















--> 





定义 (DEF) 节 点 索引 :动画 (Animation) ， 点 击 器 (CLicker)， 时 间 线 (TimeSource) ， 变 换 矩 阵 (XForm) 


- -> 
<Scene> 


<!-- XForm ROUTE: [从 Animation.value_changed 到 rotation ] --> 


<Transform DEF='XForm'> 
<Shape> 

<Box/> 

<Appearance> 


<Material diffuseColor='1.0 0.0 0.0'/> 


</Appearance> 
</Shape> 


<!-- Clicker ROUTE: [从 touchTime 到 TimeSource.startTime ] --> 
<TouchSensor DEF='Clicker' description='click to animate ' /> 


<!-- TimeSource ROUTES : 


[从 Clicker.touchTime 到 startTime ] [从 fraction_changed 到 Animation.set fraction ] --> 
<TimeSensor DEF='TimeSource' cycleInterval='2.0'/> 


<!-- Animation ROUTES : 


[从 TimeSource.fraction_changed 到 set_fraction ] 


[从 value_changed 到 XForm.rotation ] -- 


> 


<OrientationInterpolator DEF='Animation' key='0.0 0.33 0.66 1.0' 
keyValue='0.0 1.0 0.0 0.0 0.0 1.0 0.0 2.1 0.0 1.0 0.0 4.2 0.0 1.0 0.0 0.0'/> 


</Transform> 
<ROUTE fromNode='Clicker' fromField=" 
toField='startTime'/> 


touchTime' toNode='TimeSource'" 


<ROUTE fromNode='TimeSource' fromField='fraction_changed' 
toNode='Animation' toField='set fraction'/> 
<ROUTE fromNode='Animation' fromField='value_changed' toNode='XForm' 


toField='rotation'/> 
</Scene> 
</X3D> 








VRML 的 设计 体现 了 交互 式 3D 图 形 的 许多 关键 概念 ， 因 此 ， 你 或 许 会 认为 它 适 合 WebGL 
使 用 。 但 是 ， 这 个 格式 是 在 JavaScript 和 DOM 都 还 没有 出 现 前 设计 的 ， 并 且 早 于 许多 现 
今 正在 使 用 的 硬件 加 速 关键 特性 。 基 于 这 一 点 ， 依 我 个 人 浅见 ，VRML/X3D 过 时 了 ， 不 再 
适合 实际 使 用 。 不 过 ， 它 里 面 有 许多 可 以 借鉴 到 WebGL 中 的 想法 。 

多 年 来 ， 出 现 了 许多 VRML 和 X3D 格式 的 内 容 。 德 国 的 Fraunhofer 研究 所 还 在 继续 
X3D 的 研究 ， 并 创建 了 X3DOM， 一 个 使 用 WebGL 显示 X3D 内 容 的 查看 器 。 更 多 关于 
X3DOM 的 信息 ， 可 以 访问 http://www.x3dom.org/。 
































VRML (http://www.web3d.org/standardsvrml/) 和 X3D (http://www.web3d.org/standardsx3d/) 的 规 
范 可 以 在 网 上 找到 。 


2. COLLADA: 数字 资源 交换 格式 

2005 年 左右 ，VRML 开始 显得 有 些 陈旧 了 ， 由 包括 Sony Computer Entertainment、Alias 
Systems 和 Avid Technology 在 内 的 一 些 公司 组 成 了 一 个 小 组 ， 一 起 开发 一 个 3D 数字 资源 
格式 ， 用 于 在 游戏 和 交互 式 3D 应 用 中 交换 数据 。 索 尼 的 Rémi Arnaud 和 Mark C. Barnes 
领导 开发 了 这 个 格式 ， 命 名 为 COLLADA (COLLAborative Design Activity) 。 在 第 一 版 规 
范 及 相关 公司 支持 完成 后 ， 这 个 标准 的 开发 移交 给 了 Khronos 组 织 ， 该 非 营利 性 组 织 还 开 
发 了 WebGL、OpenGL， 以 及 其 他 图 形 硬件 及 软件 API 的 规范 。 


COLLADA 和 X3D 一 样 ， 是 一 个 基于 XML 的 全 功能 格式 ， 可 以 表示 整个 场景 以 及 多 种 
不 同类 型 的 几何 体 、 材 质 、 动 画 及 灯光 。 和 X3D 不 同 的 是 ，COLLADA 的 目标 不 是 实 
现 一 个 包含 行为 及 运行 时 语义 、 面 向 最 终 用 户 的 格式 。 事 实 上 ， 它 并 没有 明确 的 技术 目 
标 ， 而 是 试图 完整 保存 从 3D 软件 中 可 以 输出 的 所 有 信息 ， 使 得 它 可 以 被 后 续 的 软件 使 
用 ,或 者 被 游戏 引 敬 及 开发 环境 导入 ， 然 后 部 署 到 最 终 的 应 用 中 。 它 的 主要 想法 是 ， 一旦 
COLLADA 被 业界 广泛 接受 ， 各 种 DCC 工具 厂商 就 不 需要 编写 插件 导出 为 其 他 自 定 义 格 
式 ， 只 要 支持 导出 为 COLLADA， 理 论 上 任何 其 他 软件 都 能 导入 。 


例 8-5 展示 了 一 个 COLLADA 场景 的 部 分 代码 ， 我 们 将 在 本 章 后 面 使 用 Three.js 加 载 它 。 
这 里 简单 讲解 一 下 ，COLLADA 文件 结构 的 儿 个 特点 值得 一 提 。 首 先 ， 它 是 以 库 的 形式 
来 组 织 结构 的 ， 这 些 库 有 不 同 的 类 型 ， 比 如 图 片 、 着 色 器 和 材质 。 这 些 库 首先 在 XML 
中 进行 定义 ， 然 后 被 其 他 需要 的 部 分 引用 (比如 材质 定义 中 使 用 的 图 片 )。 其 次 ， 注 意 
它 会 显 式 声明 一 些 函 数 ， 而 这 些 函 数 通 常情 况 下 都 被 看 作 内 置 函数 ， 比 如 Blinn 着 色 器 。 
COLLADA 不 对 着 色 器 和 泻 染 模型 做 任何 假设 ， 它 只 是 存储 这 些 信息 ， 让 另 一 个 工具 拿 到 
这 些 信息 后 再 去 做 相应 的 处 理 。 接 着 ， 我 们 发 现 网 格 顶点 数据 表示 为 一 系列 类 型 为 float_ 
array 的 元 素 。 最 终 ， 通 过 引用 了 前 面 定义 的 几何 体 及 材质 【使 用 XML 中 的 instance_ 
geometry、bind_material 及 instance_material 元 素 ) ， 这 些 网 格 组 装 成 了 一 个 用 户 可 见 的 
场景 。 


例 8-5: COLLADA 文件 的 结构 ， 包 括 样本 库 、 几 何 体 及 场景 
<?xml version="1.0"?> 
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" 
version="1.4.1"> 
<asset> 
<contributor> 
<authoring_tool>CINEMA4D 12.043 COLLADA Exporter 
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</authoring_tool> 
</contributor> 
<Created>2012-04-25T16:44:59Z</created> 
<modified>2012-04-25T16:44:59Z</modified> 
<unit meter="0.01" name="centimeter"/> 
<up_axis>Y_UP</up_axis> 
</asset> 
<library_images> 
<image id="ID5"> 
<init_from>tex/Buss.jpg</init_from> 
</image> 
，<!-- 其 他 图 片 的 定义 --> 
</library_images> 
<library_effects> 
<effect id="ID2"> 
<profile_COMMON> 
<technique sid="COMMON"> 
<blinn> 
<diffuse> 
<color>0.8 0.8 0.8 1</color> 
</diffuse> 
<specular> 
<color>0.2 0.2 0.2 1</color> 
</specular> 
<shininess> 
<float>0.5</float> 
</shininess> 
</bLinn> 
</technique> 
</profile_ COMMON> 
</effect> 
，<!-- 其 他 滤 镜 的 定义 --> 
<library_geometries> 
<geometry id="ID56"> 
<mesh> 
<source id="ID57"> 
<float_array id="ID58" count="22812">36.2471 
9.43441 -6.14603 36.2471 11.6191 -6.14603 36.2471 9.43441 -9.04828 
36.2471 11.6191 -9.04828 33.356 9.43441 -9.04828 33.356 11.6191 
-9.04828 33.356 9.43441 
. <!-- 网 格 定义 的 其 余部 分 --> 




















<!-- 以 节点 层级 结构 的 形式 定义 场景 - -> 
<library_visual_scenes> 
<visuyal_scene id="ID53"> 
<node id="IDS55" name="Buss"> 
<translate sid="translate">5.08833 -0.496439 
-0.240191</translate> 
<rotate sid="rotateY">0 1 0 0</rotate> 
<rotate sid="rotateX">1 0 0 0</rotate> 
<rotate sid="rotateZz">0 0 1 0</rotate> 
<scale sid="scale">1 1 1</scale> 
<instance_geometry url="#ID56"> 
<bind_material> 
<technique_common> 





<instance_material 
symbol="Material1" target="#ID3"> 
<bind_vertex_input 
semantic="UVSETO" 
input_semantic="TEXCOORD" 
input_set="0"/> 
</instance_material> 
</technique_common> 
</bind_material> 
</instance_geometry> 
</node> 


.. <!-- 其 余 的 场景 定义 --> 


经 过 了 诞生 初期 高 度 的 热情 及 广泛 的 厂商 支持 后 ， 对 COLLADA 的 支持 开始 衰退 了 。 从 
大 概 2010 年 开始 ， 流 行 DCC 工具 中 导出 这 个 格式 的 插件 的 开发 几乎 停止 了 。 最 近 ， 
COLLADA 又 被 重新 重视 起 来 ， 主 要 原因 是 对 WebGL 的 支持 的 需求 一 一 WebGL 中 缺乏 
内 置 的 文件 格式 〈 后 面 会 更 详细 地 介绍 )。 随 后 出 现 了 一 个 新 的 开源 项 目 OpenCOLLADA 
(https:/www.khronos.org/collada/wiki/OpenCOLLADA)， 它 包括 了 支持 3ds Max 及 Maya 
2010 年 以 后 版 本 的 导出 工具 ， 能 导出 干净 并 兼容 的 COLLADA 格式 。 


尽管 增强 对 COLLADA 格式 的 支持 对 于 3D 内 容 制 作 流程 是 一 大 好 处 ， 但 它 有 个 问题 。 正 
如 我 们 在 前 面 例 子 中 看 到 的 ，COLADA 非常 元 长 。 这 个 格式 是 设计 用 来 保存 更 多 数据 
的 ， 而 不 是 为 了 快速 下 载 和 解析 。 因 此 Khronos 组 织 开 始 开发 一 个 新 的 格式 ， 既 保留 了 
COLLADA 中 的 优秀 特性 一 一 能 完全 表示 丰富 的 3D 动画 场景 ， 又 同时 考虑 了 Web 传输 问 
题 ， 这 个 格式 是 glTF。 

3. gITF: 一 个 用 于 WebGL、OpenGL ES 及 OpenGL 应 用 的 新 格式 

随 着 WebGL 的 逐渐 流行 ， 它 带 来 了 一 个 需要 Web 开发 者 解决 的 问题 ， 那 就 是 如 何 从 3D 
DCC 工具 中 导出 完整 的 信息 到 WebGL 应 用 中 。 类 似 OBJ 那样 的 单一 网 格 文本 格式 足以 表 
示 一 个 物体 ， 但 它 不 包含 场景 图 结构 、 光 源 、 相 机 及 动画 。COLLADA 的 功能 完善 ， 但 是 
我 们 在 前 面 一 节 中 看 到 ， 它 很 元 长 ， 而 且 它 是 XML 格式 的 ， 需 要 大 量 CPU 计算 来 解析 并 
转 成 可 以 被 WebGL 演 染 的 数据 结构 。 我 们 需要 一 个 紧 竣 、 适 合 Web 的 格式 ， 它 在 泻 染 前 
只 需要 进行 最 少 的 额外 处 理 ， 类 似 3D 领域 的 JPEG 格式 。 

在 2012 年 的 夏天 ，Fabrice Robinet (摩托 罗拉 工程 师 、Khronos COLLADA 工作 组 主席 ) 开 
始 开发 拥有 COLLADA 功能 的 3D 格式 ， 它 比 COLLADA 更 紧 竣 ,而 且 更 适合 WebGL。 
最 开始 这 个 项 目 被 称 为 COLLADA2JSON， 它 的 想法 是 将 笨重 的 XML 语法 转 成 轻 量 级 的 
JSON。 从 此 以 后 ， 它 开始 走 上 了 属于 自己 的 发 展 道路 。Khronos COLLADA 工作 组 中 的 其 
他 成 员 也 加 入 进来 了 ， 包 括 我 、COLLADA 的 创造 者 Remi Arnaud， 以 及 Patrick Cozzi ( 防 
御 软 件 供应 商 AGI 的 工程 师 )。 我 们 的 工作 从 简单 地 转换 和 优化 COLLADA 格式 ， 变 成 
了 从 头 设计 一 种 新 的 格式 ， 用 于 基于 OpenGL 的 Web 及 移动 应 用 。 于 是 gITF (Graphics 
Library Transmission Format， 图 形 库 传输 格式 ) 诞生 了 。 


glTF 以 COLLADA 的 全 功能 特性 为 出 发 点 ， 但 它 是 一 种 全 新 的 格式 。COLLADA 的 特性 
被 用 作 支 持 何 种 图 形 特 性 的 参考 ， 但 细节 则 完全 不 同 。gITE 使 用 JSON 来 描述 场景 结构 及 
高 层 信息 〈 比 如 相机 和 光源 ) ， 使 用 二 进 制 格式 来 描述 详细 的 数据 ， 比 如 顶点 、 法 线 、 颜 
色 和 动画 。glTF 的 二 进 制 格式 被 设计 为 能 直接 加 载 到 WebGL 的 缓冲 中 (比如 Int32Array 
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和 FLoatArray 这 样 的 类 型 数组 ) 。 加 载 一 个 glTF 文件 的 流程 可 以 简单 地 描述 如 下 : 
(1) 读 取 一 个 简单 的 JSON 包装 文件 ; 

(2) 通过 Ajax 加 载 外 部 二 进 制 文件 ; 
(3) 创建 一 些 类 型 数组 ， 

(4) 调用 WebGL 绘制 内 容 的 方法 来 浑 染 。 


当然 ， 实 际 上 这 样 看 起 来 更 复杂 一 点 。 但 它 比 下 载 和 解析 XML 文件 、 将 JavaScript Number 
类 型 转 成 类 型 数组 高 效 多 了 。glTF 可 以 保证 文件 体积 小 且 加 载 速度 快 ， 这 些 都 是 创建 高 性 
能 Web 及 移动 应 用 中 的 关键 因素 。 


例 8-6 展示 了 一 个 典型 gITF 场景 的 JSON 语法 ， 这 个 场景 就 是 著名 的 COLLADA 鸭 模 型 。 
注意 ， 它 的 语法 结构 类 似 COLLADA， 首 先 出 现 的 是 库 ， 在 最 后 定义 场景 图 的 结构 ， 里 面 
会 引用 这 些 库 。 但 也 就 只 有 这 些 相 同 之 处 了 。glTF 省 掉 了 运行 时 非 必 和 需 的 信息 ， 取 而 代 之 
通过 定义 结构 来 让 WebGL 和 OpenGL ES 快速 加 载 。gITF 定义 了 属性 (顶点 位 置 、 法 线 、 
颜色 、 纹 理 坐 标 等 ) 的 详细 信息 ， 这 些 信息 用 于 在 可 编程 着 色 器 中 泻 染 物体 。 使 用 这 些 属 
性 信息 ，glTF 应 用 可 以 如 实 泻 染 任意 网 格 ， 即 便 它 自己 没有 复杂 的 材质 系统 。 

除了 JSON 文件 ，glTF 还 会 引用 一 个 或 多 个 存储 了 丰富 数据 (比如 网 格 和 动画 的 顶点 数 
据 ) 的 二 进 制 文件 (后缀 是 .bin) ， 这 些 二 进 制 文件 中 的 数据 结构 被 称 为 组 冲 (buffer) 和 
缓冲 视图 (buffer view)。 使 用 这 种 方式 ， 我 们 可 以 流 式 下 载 、 增 量 下 载 ， 或 者 一 次 性 加 载 
glTF 内 容 ， 这 取决 于 应 用 需求 。 

例 8-6: glTF JSON 文件 格式 的 例子 

{ 





















































"animations": {}, 
"asset": { 
"generator": "collada2gltf 0.1.0" 
} 
"attributes": { 
"attribute 22": { 
"bufferView": "bufferView_28", 
"byteOffset": 0， 
"byteStride": 12， 
"count": 2399 ， 
"max": [ 
96.1799 ， 
163.97， 


-61.3282 


"type": "FLOAT_VEC3" 




















}， 
.…， 此 处 省 略 其 他 顶点 属性 
"bufferViews": { 
"bufferView 28": { 





A 
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"buffer": "duck.bin", 
"byteLength": 76768, 
"byteOffset" : 0， 
"target" : "ARRAY_BUFFER" 

}， 

"bufferView 29": { 
"buffer": "duck.bin", 
"byteLength": 25272， 
"byteoffset": 76768, 
"target": "ELEMENT_ARRAY_BUFFER" 


} 
}， 
"buffers": { 
"duck.bin": { 
"byteLength": 102040, 
"path": "duck.bin" 
} 
}， 


"cameras": { 
"camera_0": { 
"aspect_ratio": 1.5, 
"projection": "perspective", 
"yfov": 37.8492, 
"zfar": 10000, 
"znear": 1 
} 
}， 





.其 他 高 级 物体 ， 如 材质 和 灯光 


. 最 后 是 场景 图 (scene graph) 














"nodes": { 
"LoD3sp": { 
"children": []， 
"matrix": [ 


.…， 和 矩阵 数据 





"meshes": [ 
"LOD3spShape- lib" 
]， 
"name": "LOD3sp" 
}， 





尽管 gITEF 设计 的 重点 是 为 OpenGL 提供 紧凑 和 高 效 的 数据 格式 ， 但 设计 者 还 是 做 出 了 一 
定 的 折 中 ， 保 留 了 DCC 工具 所 创建 的 部 分 必 备 3D 数据 ， 比 如 动画 、 相 机 和 光源 。 当 前 版 
本 的 gITF (1.0) 支持 以 下 特性 。 


网 格 

多 边 形 网 格 由 一 个 或 多 个 几何 基 元 组 成 。 网 格 在 JSON 文件 中 定义 ， 然 后 引用 一 个 或 多 
个 包含 顶点 数据 的 二 进 制 数据 文件 。 

材质 和 着 色 器 


材质 可 以 表示 为 高 层 的 通用 结构 (Blinn、Phong、Lambert) ， 或 者 在 GLSL 顶点 着 色 器 
和 片段 着 色 器 中 实现 ， 作 为 外 部 文件 被 gITF 文件 引用 。 
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通用 光源 类 型 (定向 光 、 点 光源 、 聚 光 灯 和 环境 光 )， 可 以 在 SON 文件 中 用 高 层 结构 
表示 。 

。 相机 
glTF 定义 了 通用 的 相机 类 型 ， 比 如 透视 相机 和 正 交 相 机 。 

。 场景 图 结构 
场景 使 用 一 个 层级 图 来 表示 ， 有 许多 布点 ( 即 网 格 、 相 机 和 光源 )。 

。 变换 层级 
场景 图 中 的 每 个 布点 都 有 一 个 关联 的 变换 和 矩阵。 每 个 节点 都 可 以 包含 子 布 点 ， 子 市 点 继 
承 父 节点 的 变换 信息 。 

















。 动画 
glTF 定义 了 用 来 表示 基于 关键 帧 、 蒙 皮 及 变形 动画 的 数据 结构 。 
。 外 部 媒体 























图 片 和 视频 可 以 用 作 纹 理 贴图 的 外 部 文件 ， 使 用 URL 来 引用 。 


gITF 项 目 尽 管 是 在 Khronos 组 织 的 赞助 下 开发 的 ， 但 它 完全 公开 ， 人 允许 任何 人 贡献 代码 。 
在 GitHub 中 有 一 个 源码 仓库 ， 其 中 包含 了 可 以 用 的 查看 器 、 例 子 及 规范 本 身 。glTF 团队 
信奉 的 理念 是 功能 需要 先 在 代码 中 实现 ， 然 后 才 写 到 规范 中 。 该 团队 已 经 开发 了 四 个 独立 
的 glTF 查看 器 ， 其 中 一 个 可 以 在 Three.js 中 使 用 (我 们 待 会 将 看 到 )。 想 要 获取 更 多 信息 ， 
请 访问 Khronos glTF 的 主页 (http://gltf.gl1/)。 
































lly 





4. Autodesk FBX 

还 有 一 个 全 功能 场景 格式 值得 一 提 ， 至 少 要 顺带 介绍 一 下 。FBX 格式 是 一 种 文本 格式 ， 
归属 于 Autodesk 公司 。 最 早 它 由 Kaydara 开发 ， 用 于 MotionBuilder 中 。Autodesk 收购 
Kaydara 后 ， 它 开始 在 它 的 多 个 产品 中 使 用 FBX 格式。 就 这 样 ，FBX 变 成 了 Autodesk 产 
品 (3ds Max、Maya 和 MotionBuilder) 内 部 交换 数据 的 标准 。 


FBX 是 一 个 富 格式 ， 支 持 许 多 3D 和 动画 数据 类 型 。 和 本 章 介绍 的 其 他 格式 不 同 ，FBX 是 
私有 的 ， 被 Autodesk 完全 控制 。Autodesk 编写 这 个 格式 的 文档 ， 并 提供 C++ 和 Python 的 
SDK 来 读 写 FBX 文件 。 但 这 些 SDK 需要 产品 许可 证 ， 有 些 可 能 会 很 贵 。 目 前 有 一 些 不 使 
用 SDK 开发 的 FBX 导入 导出 工具 ， 比 如 Blender， 但 不 清楚 这 样 使 用 在 FBX 授权 协议 中 
是 否 合法 。 
因为 这 个 格式 是 私有 的 ， 而 且 许 可 协议 模糊 ， 所 以 最 好 不 使 用 FBX。 但 另 一 方面 ， 它 是 
在 业界 顶尖 工具 中 所 使 用 的 非常 强大 的 技术 ， 因 此 值得 一 看 。 想 要 获取 更 多 信息 ， 请 访问 
FBX 的 主页 (http://www.autodesk.com/products/fbx/overview) 5 


8.4 加 载 3D 内 容 到 WebGL 应 用 中 


还 记得 WebGL 只 是 一 个 绘图 库 吧 ， 它 内 部 并 没有 多 边 形 网 格 、 材 质 、 光 源 以 及 开发 者 在 
3D 图 形 中 用 到 的 任何 高 层 结 构 的 概念 。WebGL 只 知道 三 角形 和 数学 ， 因 此 WebGL 没有 
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自己 的 文件 格式 并 不 奇怪 。 而 且 它 也 没有 对 本 章 之 前 介绍 的 所 有 格式 的 内 建 支持 。 为 了 将 
3D 文件 加 载 到 你 的 Web 应 用 中 ， 你 需要 自己 编写 代码 ， 或 者 使 用 相关 的 库 。 


值得 高 兴 的 是 ，Three.js 有 许多 加 载 常 见 格式 的 示例 代码 ， 包 括 OBJ、STL、VRML 和 
COLLADA 等 。 不 过 这 些 加 载 器 代码 仅仅 只 是 示例 代码 ， 它 们 之 间 差 别 很 大 ， 有 些 加 载 器 
非常 健壮 ， 有 些 则 不 完善 且 有 缺陷 。Three.js 还 定义 了 针对 它 自己 的 文件 格式 。 它 使 用 了 
基于 JSON 的 清晰 文本 格式 ， 还 使 用 了 二 进 制 文件 来 压缩 体积 和 提升 加 载 速度 ， 这 和 glTF 
很 类 似 。 它 甚至 还 有 一 个 基于 JSON 的 、 能 包含 多 个 物体 的 完整 场景 格式 。 不 过 这 个 格式 
还 是 实验 性 的 ， 在 我 看 来 它 还 不 能 在 正式 产品 中 使 用 。 

长 话 短 说 ， 你 应 该 将 WebGL 中 的 3D 内 容 制 作 流程 当 作 一 场 探 险 。 尽 管 我 们 最 终 会 到 达 
目的 地 ， 但 在 这 条 路 上 有 许多 曲折 和 意外 。 让 我 们 开始 这 个 探险 吧 ， 在 本 章 的 剩余 部 分 ， 
我 们 将 会 研究 如 何 使 用 Three.js 将 内 容 加 载 到 WebGL 应 用 中 。 


8.4.1 Three.js JSON 格 式 


Three.js 核心 包 中 定义 了 自己 的 文件 格式 ， 它 和 OBJ 功能 类 似 ， 用 于 加 载 网 格 。 但 和 OBJ 
不 同 的 是 ， 这 个 格式 是 基于 JSON 的 ， 所 以 它 解析 后 能 很 方便 地 为 Threejs 使 用 。 


在 本 书 编写 的 时 候 ， 还 没有 多 少 工具 支持 导出 Three.js JSON 格式 。Three.js 团队 写 了 一 个 
Blender 的 导出 器 ， 所 以 这 是 一 个 可 行 的 方式 。 事 实 上， 如 果 你 需要 从 各 种 不 同 格式 导出 
到 Three.js JSON， 这 是 一 个 不 错 的 方式 ， 因 为 Blender 支持 导入 多 种 格式 。 如 果 你 不 喜欢 
用 Blender， 另 一 种 方式 是 使 用 OJB 文件 来 转换 。Three.js 有 一 个 将 OBJ 文件 转 成 Three.js 
JSON 格式 的 工具 ， 它 是 用 Python 写 的 ， 我 们 在 下 个 例子 中 会 用 到 它 。 

打开 本 书 示例 文件 Chapter 8/pipelinethreejsmodel.html。 你 可 以 看 到 一 个 经 典 的 太空 椅 模 型 ， 
就 是 一 个 中 间 有 个 大 垫子 的 卵 形 椅子 。 使 用 鼠标 左 键 来 旋转 模型 ， 使 用 滚轮 或 触摸 板 来 放 
大 缩小 ， 如 图 8-12 所 示 。 

































































图 8-12: 一 个 Wavefront OBJ 格式 的 文件 ， 转 成 了 Three.js JSON 格式 ， 并 通过 THREE.JSONLoader 
进行 加 载 ， 这 个 经 典 的 球形 椅子 模型 来 自 Turbosquid (http://www.turbosquid.com/ 
FullPreview/Index.cfm/ID/761919)， 由 Luxxeon (http:WIuxxeon.deviantart.com/) 创建 





3D 内 容 制 作 流程 | 179 


这 个 场景 中 的 阴影 和 光线 都 是 固定 的 ， 用 来 提供 一 个 好 看 的 背景 ， 但 模型 都 来 自 OBJ。 从 
Turbosquid 下 载 这 个 美妙 的 模型 后 ， 我 通过 运行 OBJ 转换 工具 来 创建 能 被 Three.js 加 载 的 
JSON 文件 。 

转换 工具 在 Three.js 项 目的 utils 子 目 录 下 。 运 行 如 下 命令 来 进行 模型 转换 : 


python <path-to-three.js>/utils/exporters/convert obj three.py -i ball_chair.obj 
-oball_chair.js 











它 会 输出 ball_chair.js 文件 。 让 我 们 看 看 文件 的 JSON 语法 ， 例 8-7 是 它 的 部 分 代码 。 在 一 
些 描 述 版 本 号 及 其 他 信息 的 元 数据 后 ， 就 是 内 容 部 分 。 首 先 ， 有 一 些 材质 的 定义 。 它 们 看 
起 来 应 该 很 熟悉 ， 因 为 是 从 OBJ、MTL 文件 转换 过 来 的 ， 我 们 在 例 8-2 中 已 经 介绍 过 。 在 
那 之 后 是 网 格 定 义 ， 占 据 了 文件 的 大 部 分 内 容 。 毫 无 疑问 ， 这 些 JSON 数组 定义 了 顶点 位 
署 、 法 线 、 纹 理 坐 标 以 及 面 片 。 一 旦 Three.js 有 了 JSON 中 的 这 些 信 息 ， 它 就 能 轻松 泻 染 
我 们 前 面 看 到 的 网 格 。 


例 8-7: Three.js JSON 格式 的 例子 






































{ 

"metadata" : 

{ 
"formatVersion" : 3.1, 
"sourceFile" : "ball_chair(blender).o0bj", 
"generatedBy" : "0BJConverter", 
"vertices" : 12740 ， 
"faces" : 12480 ， 
"normals" : 13082 ， 
"colors" : 0， 
"Uvs" 15521, 
"materials" 2 4 

}, 


"scale" : 1.000000, 


"materials": [ { 

"DbgColor" : 15658734, 

"DbgIndex" : 0， 

"DbgName" : "shell", 

"colorAmbient" : [0.0, 0.0, 0.0], 
"colorDiffuse" : [0.588, 0.588, 0.588], 
"colorSpecular" : [0.72, 0.72, 0.72], 


"illumination"” : 2， 
"mapAmbient" : "shell_color.jpg", 
"mapDiffuse" : "shell_color.jpg", 


"opticalDensity" : 1.5, 
"specularCoef" : 77.0 
}， 


.其 他 材质 定义 





"vertices": [-1.569305,4.927318,-1.529769,-0.889529, 





} 





.其 他 顶点 数据 


"morphTargets": []， 
"morphColors": []， 


"normals": [-0.53717,0.35055,-0.76718,-0.46279,0.35837, 








.其 他 法 向 量 、 颜 色 和 纹理 坐标 数据 








"faces": [43,312,599,57,596,0,0,1,2,3,0,1,2,3,43,597 





.其 他 面 片 数 据 


| 


现在 让 我 们 看 看 加 载 这 个 模型 的 代码 。Three.js 并 没有 自 带 模 型 查看 器 ， 所 以 我 们 需要 自 











巴 这 个 例子 








己 开 发 。 但 它 非 常 容易 〈 至 少 对 于 开发 一 个 简单 的 模型 查看 器 来 说 ) 。 我 们 将 
分 成 两 个 代码 清单 ， 一 个 创建 场景 和 加 载 模型 ， 另 一 个 设置 包括 光源 、 背 景 及 相机 控制 的 
场景 环境 。 场景 创建 和 加 载 模 型 的 代码 如 例 8-8 所 示 。 
例 8-8: 加 载 一 个 Three.js JSON 格式 的 模型 的 代码 


function loadModel() { 


} 

















// 球形 椅子 模型 由 Luxxeon 提 供 
// http://www.turbosquid.com/FullPreview/Index.cfm/ID/761919 
// http://www.turbosquid.com/Search/Artists/Tluxxeon 

// http://Luxxeon.deviantart.com/ 





var UrL = "../models/ball_chair/ball_chair.json"; 














// 卵 形 椅 子 模型 由 Luxxeon 提 供 
// http://www.turbosquid.com/FullPreview/Index.cfm/ID/738230 
// http://www.turbosquid.com/Search/Artists/Tluxxeon 

// http://Luxxeon.deviantart.com/ 

// var url = "../models/egg_chair/eggchair.json"; 


var loader = new THREE.JSONLoader(); 
loader .load( url, function( geometry, materials ) { 
handleModelLoaded(geometry, materials) } ); 


function handleModelLoaded(geometry, materials) { 


// 创建 一 个 新 的 多 面 材 质 
var material = new THREE.MeshFaceMaterial(materials); 
var mesh = new THREE.Mesh( geometry, material ); 


// 开启 阴影 


mesh.castShadow = true; 














// 如 果 物 体 模型 不 在 中 心 ,将 其 移 到 原点 
geometry.computeBoundingBox(); 
center = new THREE.Vector3().addVectors(geometry.boundingBox.max, 
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geometry.boundingBox.min).multiplyScalar(0.5); 
mesh.position.set(-center.x, 0, -center.z); 
scene.add( mesh ); 





// 基于 几何 形状 的 尺寸 找到 一 个 合适 的 相机 位 置 

var front = geometry.boundingBox.max.clone().sub(center); 

//camera.position.set(0, geometry.boundingBox.max.y / 2， 
geometry.boundingBox.max.z * 8); 

camera.position.set(0, front.y, front.z * 5); 


if (orbitControls) 
orbitControls.center .copy(center); 


} 


function createScene(container) { 


// 创建 一 个 新 的 Three. js 场景 


scene = new THREE.Scene(); 





// 添加 一 个 相机 ,以 便 我 们 观察 整个 场景 

camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / 
container .offsetHeight, 1, 4000 ); 

camera.position.z = 10; 

scene.add(camera); 


// 灯光 


createLights(); 


// 地 面 
if (addEnvironment) 
createEnvironment(); 





// 模型 

loadModel(); 
} 
首先 ，createScene() 函数 创建 了 一 个 空 的 Three.js 场景 ， 然 后， 通过 辅助 函数 (我们 待 会 
将 会 介绍 )， 它 创建 一 个 相机 ， 以 及 光源 和 背景 。 还 记得 吗 ， ， 一 模型 的 格式 是 不 包 








含 相机 和 光源 的 ， 所 以 我 们 需要 自己 创建 它们 。 


接 下 来 ， 我 们 调用 loadModel() 函数 来 加 载 模型 。 它 使 用 了 Threejs 内 建 的 类 THREE. 

JSONLoader ， 这 个 类 会 将 解析 好 后 的 JSON 转 成 可 以 使 用 的 Three.js 几何 体 。 我 们 调用 加 载 

器 的 Load() 方法 ， 参 数 是 模型 的 URL 和 一 个 回调 函数 。 回 调 函 数 handleModelLoader() 承 

担 了 少量 的 工作 。 在 成 功 解析 JSON 后 ，Three.js 创建 了 一 个 几何 对 人 象 并 调用 我 们 的 回调 函 

数 。 然 后 需要 我 们 来 创建 材质 ， 我 们 使 用 特殊 的 材质 类 型 THREE.MeshFaceMaterial。 这 个 

eh JSON 格式 支持 在 几何 体 的 每 一 面 都 使 用 不 同 的 材质 。 我 们 使 用 回 
函数 第 二 个 参数 的 不 同 材质 来 创建 MeshFaceMaterial 类 型 的 对 象 。 


现在 我 们 的 网 格 可 以 泻 染 了 ， 我 们 将 它 添加 到 场景 中 。 而 且 我 们 还 加 入 了 一 些 其 他 效果 。 
我 们 想 要 有 阴影 ， 所 以 设置 网 格 的 castShadow 属性 为 true。 我 们 想 让 网 格 在 相机 控制 器 中 
摆好 位 置 ， 所 以 将 它 放 到 了 原点 处 。 我 们 可 以 通过 调用 Three.js 的 getBoundingBox() 函数 




















来 得 到 网 格 的 中 心 。 我 们 还 通过 边界 框 (bounding box) 来 计算 合适 的 相机 位 置 ， 将 相机 
放 在 边界 框 的 前 上 方 。 


例 8-9 给 出 了 创建 一 个 通用 模型 查看 器 的 部 分 代码 。 首 先 ， 我 们 的 泻 染 循环 包含 了 一 个 对 
headlight (一 个 白色 的 定向 光源 ) 的 旋转 ， 它 永远 从 相机 当前 位 置 照 射 到 场景 中 央 。 这 样 ， 
我 们 就 能 以 任意 角度 来 查看 模型 。 

我 们 希望 有 良好 的 阴影 效果 来 提升 视觉 体验 ， 所 以 在 创建 演 染 器 和 场景 光源 的 时 候 设 置 
了 必要 的 Three.js 的 shadow 属性 ， 请 分 别 查 看 createRenderer() 函数 和 createLights() 
国 数 。 最 后 ， 我 们 需要 一 个 地 板 来 投射 阴影 ， 所 以 我 们 在 createEnvironment() 函数 中 
创建 它 。 

用 于 显示 太空 椅 模 型 的 代码 可 以 作为 样板 代码 : 创建 一 个 背景 ， 创 建 一 些 默认 的 光源 ， 创 
建 一 个 相机 ， 加 载 模型 ， 在 相机 移动 的 同时 保持 光源 的 合适 的 朝向 。 这 些 步骤 可 以 用 来 查 
看 任意 基本 模型 。 

然而 ， 这 种 代码 的 组 织 方式 并 不 适合 在 应 用 中 重用 。 我 们 将 在 下 一 章 中 解决 这 个 问题 ， 我 
们 会 开发 一 个 通用 的 模型 查看 器 类 。 但 现在 的 关键 问题 在 于 : 在 Three.js 中 加 载 一 个 OBJ 
格式 的 单一 模型 文件 原本 就 不 复杂 。 

例 8-9: 设置 JSON 模型 查看 器 的 背景 和 场景 光照 


function run() { 
requestAnimationFrame(function() { run(); }); 




















// 更 新 相机 控制 器 


orbitControls.updatel(); 





// 调整 headLight 的 位 置 ,使 其 指向 模型 


headlight.position.copy(camera.position); 


// 演 染 场景 
renderer.render( scene, camera ); 


} 


var shadows = true; 
var addEnvironment = true; 
Var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 2048; 


function createRenderer(container) { 
// 创建 Three.js 泻 染 器 并 将 其 添加 到 画布 中 


renderer = new THREE.WebGLRenderer( { antialias: true } ); 











// 开启 阴影 
if (shadows) { 
renderer.shadowMapEnabled = true; 
renderer.shadowMapType = THREE.PCFSoftShadowMap; 
} 


// 设置 视 口 尺寸 


renderer.setSize(container.offsetWidth, container .offsetHeight); 
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container .appendChiLd(Crenderer .domELement ) ; 


function createLights() { 


/7 灯光 设置 

headlight = new THREE.DirectionalLight; 
headlight.position.set(0, 0, 1); 
scene.add(headlight); 


var ambient = new THREE.AmbientLight(Oxffffff); 
scene.add(ambient); 


if (shadows) { 
var Spot1 = new THREE.SpotLight(0xaaaaaa) ; 
spot1.position.set(0, 150, 200); 
scene.add(spot1); 


spot1.shadowCameraNear Ss 

spot1.shadowCameraFar = 1024; 
spot1.castShadow = true; 
spot1.shadowDarkness =: 0.3» 


spot1.shadowBias = 0.0001; 
spot1.shadowMapWidth = SHADOW_MAP_WIDTH; 
spot1.shadowMapHeight = SHADOW_MAP_HEIGHT; 


} 


function createEnvironment() { 
// 地 面 
var floorMaterial = new THREE.MeshPhongMateriaL({ 
color: QOxffffff, 
ambient: 0x555555 ， 
shading: THREE.SmoothShading, 
]); 


var floor = new THREE.Mesh( new THREE.PLaneGeometry(1024，1024) ，fLoorMateriaL); 


if (shadows) { 
floor.receiveShadow = true; 


} 


floor.rotation.x = -Math.PI / 2; 
scene.add(floor); 


8.4.2 ”Three.js 的 二 进 制 格式 


Three.js 定义 了 一 个 更 紧凑 的 格式 ， 它 优化 了 网 格 的 加 载 ， 是 JSON 格式 的 一 个 替代 。 这 个 


二 进 制 格式 包含 两 个 文件 : 一 个 是 小 巧 的 JSON 外 壳 ， 用 于 定义 网 格 的 高 
质 列 表 ) ;一 个 是 二 进 制 文件 〈(.bin 后 缀 ) ， 包 含 了 顶点 和 面 片 的 数据 。 




















屋 属 性 (例如 材 











我 们 可 以 使 用 Three.js 的 OBJ 转换 工具 来 创建 Three.js 二 进 制 文件 ， 只 需要 简单 地 在 命令 
行 中 使 用 -t 参数 : 


使 用 上 面 的 


python <path-to-three.js>/utils/exporters/convert_obj_three. 


ball_chair.obj -o ball_chair_bin.js -t binary 

















py -i 


J 命令 来 创建 ball_chair_bin.js 文件 。 来 看 看 它 的 内 容 ，JSON 和 之 前 文本 格式 的 


版 本 很 类 似 ， 只 是 所 有 网 格 的 数据 都 被 移 到 了 二 进 制 文件 中 ， 这 些 网 格 数据 在 JSON 内 通 
过 buffers 属性 来 引用 : 


注意 文件 大 小 的 区 别 。 


"buffers": "ball_chair_bin.bin" 








二 进 制 文件 格式 (JSON 加 上 .bin 文件 ) 的 大 小 大 概 是 





纯 JSON 版 本 的 一 半 。 要 查看 二 进 制 文件 动画 的 效果 ， 请 打开 示例 文件 Chapter 8/ 


Pipelinethreejsmodelbinary.html。 











模型 和 之 前 的 效果 是 一 样 的 ， 如 图 8-12 所 示 。 在 


Three.js 中 加 载 二 进 制 格式 ， 我 们 只 需要 修改 一 行 ， 将 类 THREE.ISONLoader 改 成 THREE. 
BinaryLoader， 参 见 例 8-10。 


例 8-10: 使 用 Three.js 二 进 制 格式 来 加 载 模型 


function loadModel() { 


} 











// 球形 椅子 模型 由 Luxxeon 提 供 
// http://www.turbosquid.com/FullPreview/Index.cfm/ID/761919 
// http://www.turbosquid.com/Search/Artists/luxxeon 

// http://Luxxeon.deviantart.com/ 





var UrL = "../models/ball_chair/ball_chair_bin.json"; 











// 卵 形 椅子 模型 由 Luxxeon 提 供 
// http://www.turbosquid.com/FullPreview/Index.cfm/ID/738230 
// http://www.turbosquid.com/Search/Artists/luxxeon 

// http://Luxxeon.deviantart.com/ 

// var url = "../models/egg_chair/eggchair.json"; 





var loader = new THREE.BinaryLoader(); 
loader .load( url, function( geometry, materials ) { 
handleModelLoaded(geometry, materials) } ); 


8.4.3 ”使 用 Three.js 来 加 载 COLLADA 场 景 


i OBJ 和 它 自身 的 JSON 这 样 的 单一 模型 格式 来 加 载 高 质量 的 模型 。 
今 为 止 也 都 还 不 错 ， 但 它 在 很 多 使 用 场景 下 就 不 能 胜任 了 。 如 有 果 我 们 需要 加 载 一 个 包含 
2 并 保留 它 的 变换 层级 结构 以 及 相机 、 灯 光 、 i 就 


需要 使 用 支持 这 些 功 能 的 格式 。 不 然 的 话 ， 我 们 就 必须 按 顺 序 一 个 一 个 导入 模型 ， 8 
照 亮 ， 并 手工 进行 场景 动画 。( 不 幸 的 是 ， 在 今天 的 WebGL 开发 中 这 样 的 景象 经 0 现 ， 


























不 过 它 在 慢 慢 地 改善 。) 
我 们 之 前 讨论 过 ，COLLADA 是 一 种 表现 全 场景 数据 的 好 格式 。 


并 且 有 几 个 3D 软件 支持 导出 它 




















-yy 


它 支 持 我 们 需要 的 功能 ， 
。 有 了 COLLADA， 就 可 以 让 设计 师 来 创建 复杂 的 场景 ， 
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包括 建 模 、 贴 图 、 布 置 灯 光 及 动画 等 ， 然 后 导出 给 WebGL 使 用 ， 而 不 需要 程序 员 手 动 来 
设置 。COLLADA 的 主要 目的 是 将 创意 设计 交 给 设计 师 。 但 是 ， 它 也 有 个 缺点 ， 就 是 使 用 
了 加 载 缓慢 、 笨 重 不 堪 的 XML 格式 。 不 过 ， 对 于 我 们 为 了 加 载 和 查看 完整 的 场景 这 一 用 
途 来 说 ， 它 是 一 个 好 格式 。 

打开 示例 文件 Chapter 8/pipelinethreejsdaescene.html， 你 会 看 到 一 个 漂亮 的 游戏 背景 艺术 ， 
有 一 片 废 墟 和 被 遗弃 的 汽车 ， 如 图 8-13 所 示 。 


这 个 例子 加 载 了 一 个 COLLADA 场景 ， 它 由 几 个 物体 组 了 一 个 层级 结构 。 我 们 通过 一 行 
加 载 调用 代码 来 加 载 COLLADA 文件 。Three.js 的 COLLADA 加 载 器 知道 如 何 创 建 整个 物 
体 层 级 结构 ， 包 括 各 种 相机 、 动 画 、 光 源 等 ， 而 不 需要 我 们 参与 。 加 载 的 回调 做 了 一 些 额 
外 的 工作 ， 它 查找 相机 及 光源 ， 如 果 没 有 找到 的 话 就 设置 为 默认 ， 仅 此 而 已 。 显 然 我 们 不 
再 需要 为 了 将 每 个 单独 的 物体 摆 放 合适 而 手工 固定 它们 的 位 置 、 方 向 以 及 缩放 。 比 较 一 下 
Threejs 项 目 中 的 典型 示例 场景 代码 ， 你 会 发 现 许多 手工 的 数字 。 使 用 COLLADA 是 一 种 
全 新 的 体验 。 


让 我 们 来 看 看 加 载 COLLADA 场景 的 代码 ， 如 例 8-11 所 示 。 这 个 例子 只 展示 了 针对 加 载 
COLLADA 场景 的 代码 和 对 应 的 回调 函数 。 























图 8-13: 一 个 游戏 场景 地 图 素材 ， 有 层级 结构 和 材质 ， 使 用 THREE.CoLLadaLoader 来 加 载 COLLADA 
格 式 ， 该 素 材 来 自 Turbosquid (http://www.turbosquid.com/FullPreview/Index.cfm/ 
ID/668298)， 由 ERHLN 创建 (http:/www.turbosquid.com/Search/Artists/ERLHN) 





例 8-11: 使 用 Three.js 来 加 载 COLLADA 场景 


function LoadScene() { 


} 


// 废墟 模型 由 ERLHN 提 供 

// http://www.turbosquid.com/FullPreview/Index.cfm/ID/668298 
// http://www.turbosquid.com/Search/Artists/ERLHN 

var UrL = "../models/ruins/Ruins_ dae.dae"; 


var loader = new THREE.ColladaLoader(); 


Loader.Load( url, function( data ) { 
handleSceneLoaded(data) } ); 


function handleSceneLoaded(data) { 


} 


也 


// 将 物体 添加 到 场景 


scene.add(data. scene); 





// 遍历 寻找 相机 和 灯光 
var result = {}; 
data.scene.traverse(function (n) { traverseScene(n, result); }); 


[my 


if (result.cameras && result.cameras.length) 
Camera = result.cameras[0]; 

else { 
// 基于 场景 尺寸 寻找 一 个 最 佳 的 相机 位 置 
createDefaultCamera(); 
var boundingBox = computeBoundingBox(data.scene); 
var front = boundingBox.max; 
camera.position.set(front.x, front.y, front.z); 





} 


if (result.lights && result.lights.length) { 
} 


else 
createDefaultLights(); 


// 创建 控制 器 


initControls(); 


function traverseScene(n, result) 


{ 


// 遍历 寻找 相机 
if (n instanceof THREE.Camera) { 
if (!result.cameras) 
result.cameras = []; 


result.cameras.push(n); 


} 


// 遍历 寻找 灯光 
if (n instanceof THREE.Light) { 
if (!result.lights) 
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result.lights = []; 


result. lights.push(n); 
} 


} 


LoadScene() 国 数 使 用 THREE.ColladaLoader 类 来 加 载 废墟 。 回 调 国 数 handleSceneLoaded() 
调用 的 时 候 ， 会 被 传递 一 个 参数 data。 参 数 data 包含 了 一 个 JSON 对 象 ，JSON 对 象 中 的 
有 些 属 性 是 COLLADA 解析 后 的 内 容 。 我 们 关注 的 是 data.scene， 它 是 一 个 THREE.0bject 
对 象 ， 包 含 加 载 后 的 整个 场景 层级 结构 。 我 们 将 它 添加 到 最 顶层 的 场景 上 ， 让 Three.js 来 


演 染 它 。 


我 们 现在 基本 上 可 以 查看 场景 了 ， 但 我 们 还 想 要 锦上添花 ， 增 加 一 些 用 户 体验 。 首 先 我 们 
遍历 加 载 后 的 场景 ， 查 找 相 机 和 光源 。 如 果 找 到 了 相机 ， 我 们 会 使 用 所 找到 的 第 一 个 作为 
我 们 的 初始 查看 相机 ;如 果 没 有 找到 ， 我 们 会 创建 一 个 默认 相机 。 如 果 场 景 中 有 光源 ， 我 
们 就 使 用 它 ， 如 果 没 有 ， 我 们 就 创建 一 个 默认 的 光照 设置 。 我 们 使 用 对 和 象 的 traverse() 方 
法 来 遍历 场景 ， 它 会 递归 访问 对 象 及 其 后 代 节 点 ， 然 后 调用 我 们 提供 的 回调 函数 。 我 们 
的 回调 函数 traverseScene() 通过 使 用 instanceof 操作 符 来 测试 对 象 类 型 是 否 是 THREE. 
Camera 和 THREE.Light 来 查找 相机 和 光源 ， 并 将 找到 的 结果 分 别 插 入 到 数组 result. 
cameras 和 result.lights 中 。 


当场 景 中 不 包含 任何 相机 时 ， 我 们 会 创建 一 个 自己 的 默认 相机 。 我 们 希望 根据 场景 的 大 
i 为 了 计算 场景 的 大 小 ， 我 们 使 用 了 辅助 国 数 computeBoundingBox()。 

个 函数 遍历 场景 来 计算 包含 边界 框 。 当 它 找 到 一 个 几何 体 时 ， 就 使 用 Threejs 内 建 的 
we box 方法 来 查找 几何 体 的 边界 框 ， 然 后 将 它 合 并 到 整个 场景 的 边界 框 中 。 这 个 函 
数 有 点 长 ， 所 以 这 里 并 没有 展示 它 的 代码 。 


8.4.4 使 用 Three.js 来 加 载 glITF 场 景 


glTF 展现 了 3D 文件 格式 的 新 方式 。 它 专门 设计 用 在 Web 和 基于 OpenGL 的 移动 应 用 中 ， 
具有 原生 缓冲 及 其 他 适合 泻 染 的 数据 结构 。 同 时 ，glTF 包含 了 许多 常用 的 3D 结构 ， 而 这 
些 结构 在 OpenGL ES 中 并 没有 直接 表现 ， 比 如 材质 、 相 机 和 灯光 。glTF 的 目标 是 创建 一 
个 紧凑 的 文件 格式 ， 能 方便 地 在 Web 和 移动 应 用 中 加 载 ， 同 时 还 能 表示 实际 开发 中 用 到 的 
3D 数据 类 型 。 

目前 已 经 有 儿 个 正在 开发 中 的 项 目 ， 用 来 在 图 形 库 和 应 用 添加 glTF 支持 。 这 其 中 也 包括 
我 为 Three.js 编写 的 glTF 加 载 器 。 打 开 示 例文 件 Chapter 8/pipelinethreejsgltfscene.html。 你 
可 以 看 到 类 似 于 图 8-14 所 示 的 效果 。 几 个 太空 船 在 未 来 的 城市 上 空 巡 航 。 这 个 场景 的 这 
染 效 果 很 不 错 ， 有 环境 贴图 和 Blinn 着 色 。 里 面 有 儿 个 动画 效果 ， 其 中 包括 了 移动 摄像 头 。 
使 用 下 拉 框 来 切换 相机 和 加 载 不 同 的 场景 ， 点 击 Animation 复 选 框 来 开始 和 停止 动画 。 这 
个 场景 原本 是 在 3ds Max 中 创建 的 。Fabrice Robinet 从 3DRT.com 上 下 载 了 这 个 3ds Max 
文件 ， 导 出 为 COLLADA， 然 后 运行 转换 工具 转 成 了 glTF 文件 。 









































































































































构 、 材 质 、 光 源 和 相机 ) ; 这 个 加 载 器 的 源 代码 在 gITF GitHub 项 目 页 面 上 (https:/github. 
com/KhronosGroup/gITF) ， 这 个 虚拟 的 城市 场景 来 自 3DRT (http://3drt.com/store/free- 
downloads/33-sci-fi-skyscrapers-collection.html) 


我 照 着 Three.js 示例 中 加 载 其 他 文件 格式 的 加 载 器 来 设计 glTF 加 载 器 。 类 THREE.glTFLoader 
继承 自 加 载 器 的 基 类 THREE.Loader。 它 的 tload() 方法 用 来 解析 glTFJSON 文件 ， 载 入 外 部 资 
源 ， 如 二 进 制 缓冲 、 纹 理 和 着 色 器 ， 以 及 通过 回调 函数 来 返回 结果 。 回 调 函 数 能 够 访问 加 载 
器 创建 的 Three.js 对 象 层级 结构 ， 因 此 可 以 轻松 将 它 加 载 到 场景 中 并 开始 泻 染 。 


使 用 glTF 格式 的 先期 优势 是 十 分 可 观 的 ， 至少 和 同等 的 COLLADA 差不多 。 文 件 体积 是 
COLLADA 文本 格式 的 一 半 ， 加 载 某 些 模型 的 速度 提升 了 80%。 这 有 一 部 分 归功 于 我 们 使 
用 了 Threejs 中 新 的 BufferGeometry 类 型 ， 它 允许 我 们 用 加 载 好 后 的 类 型 数组 数据 (比如 
Int32Array 和 FloatArray) 来 直接 创建 几何 体 ， 而 不 是 使 用 普通 的 JavaScript Number 类 型 
的 数组 (不管 怎样 ， 它 最 后 还 是 需要 转 成 类 型 数组 ， 才 能 使 用 WebGL 演 染 )。 


8.5 小结 


本 章 探 索 了 如 何 为 WebGL 创建 3D 内 容 。 在 简要 介绍 创建 流程 后 ， 我 们 介绍 了 3D 内 容 创 
建 工 具 ， 从 业余 到 专业 、 从 本 地 软件 到 浏览 器 中 的 集成 环境 都 有 介绍 。 


我 们 一 有 睹 了 当今 应 用 中 使 用 的 3D 文件 格式 ， 尤 其 是 那些 适合 WebGL 在 线 使 用 的 格式 。 
这 既 包 含 了 旧 的 标准 ， 也 包括 了 新 的 格式 一 一 gITF， 它 是 专门 为 今天 的 Web 和 移动 应 用 设 
计 的 格式 。 最 后 ， 我 们 学 习 了 使 用 Three.js 库 来 加 载 各 种 格式 的 详细 例子 ， 包 括 单个 模型 
格式 和 整个 场景 。 


尽管 并 没有 一 个 在 Web 应 用 添加 3D 内 容 的 首选 方式 ， 而 且 WebGL 内 容 制作 流程 还 很 年 
轻 并 处 在 发 展 之 中 ， 但 至 少 目前 有 几 种 可 行 的 方式 能 够 完成 这 项 任务 。 
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3D 引 擎 和 框架 


Threejs 是 一 个 非常 棒 的 库 ， 它 让 用 WebGL 演 染 复杂 3D 内 容 这 一 艰巨 任务 变 得 简单 ， 人 
人 都 能 实现 。 如 果 没 有 Three.js 这 样 的 库 ，WebGL 开发 者 需要 花费 几 个 月 的 时 间 才 能 实 




















现 类 似 的 效果 。 但 尽管 很 强大 ，Three.js 依然 有 它 的 局 限 性 。 它 能 做 好 绘制 ， 
对 于 其 他 所 有 的 事情 ， 你 都 需要 自己 完成 。 





但 仅 此 而 已 。 


比如 你 想 开发 一 个 购物 应 用 ， 让 用 户 能 在 购买 前 自 定义 汽车 。Web 页 面 中 显示 车 的 3D 模 
型 ， 用 户 可 以 点 击 汽车 的 不 同 部 分 来 改变 颜色 和 样式 。 简 单 点 击 一 下 按钮 ， 就 会 有 动画 效 
果 平 清 地 从 车 的 外 部 过 渡 到 车 的 内 部 。 如 有 果 仅 使 用 Threejs， 你 可 能 需要 写成 百 上 千 行 代 
码 来 实现 这 个 应 用 。 尽 管 有 原始 的 工具 箱 ， 但 它 并 没 转 成 一 系列 更 高 层次 的 可 重用 组 件 。 
Three.js 是 被 设计 用 来 作为 场景 图 和 浑 染 库 的 ， 但 3D 应 用 开发 不 仅仅 是 绘制 图 片 。 


自 定义 汽车 的 场景 包含 了 通用 3D 开发 事项 : 加 载 模型 、 通 过 名 称 或 ID 获取 模型 的 各 个 部 
分 、 当 点 击 某 个 部 分 的 时 候 触 发 行为 、 修 改 相机 视图 ， 等 等 。 这 些 设计 模式 在 游戏 、 虚 拟 

































































世界 、 建 筑 浏览 、 教 育 软 件 、 模 拟 训 练 等 大 多 数 3D 应 用 中 很 常见 。 如 有 果 你 如 


E 开 发 专业 级 





的 3D 应 用 ， 并 且 不 想 花 时 间 在 发 明 新 方法 以 解决 旧 问 题 上 ， 那 你 应 该 考虑 使 用 高 级 的 引 





获 或 框架 。 





本 章 介 绍 3D 应 用 框架 的 概念 ， 并 着 眼 于 基于 WebGL 的 方案 。 这 些 框架 有 许多 都 是 基于 
Three.js 开发 的 ， 所 以 如 果 你 已 经 花费 很 多 精力 学 习 了 Three.js 图 形 学 ， 就 不 需要 再 去 学 习 



































其 他 全 新 的 东西 。 本 章 后 面 会 介绍 我 自己 设计 的 一 个 框架 





架 ， 此 外 它们 在 你 决定 开发 自己 的 框架 时 也 很 有 帮助 。 
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Vizi， 我 们 将 在 后 面 几 章 中 
使 用 它 来 构建 例子 。 这 些 框架 中 包含 的 概念 都 很 通用 ， 它 们 大 多 都 适用 于 其 中 任意 一 个 杠 





9.1 3D 框 架 概 念 


框架 为 开发 者 提供 了 内 建 的 功能 ， 并 实现 可 靠 、 可 重用 的 通用 设计 模式 。 它 可 以 帮助 我 们 
节省 时 间 ， 写 出 更 好 的 应 用 〈 至 少 从 理论 上 来 说 )。 一 个 好 的 框架 可 以 让 我 们 不 必 重 复 造 
轮子 ， 因 为 它 借用 了 老练 开发 者 的 经 验 ， 让 我 们 专注 于 自己 手头 上 的 工作 。 


9.1.1 什么 是 框架 
框架 并 没有 一 个 严格 的 定义 。 实 际 上 ， 经 党 很 难 区 分 框架 和 库 。 它 们 都 是 设计 用 来 节省 时 
间 的 ， 提 供 了 可 重用 的 代码 。 此 外 ， 它 们 都 掩盖 了 底层 操作 系统 或 平台 的 实现 细节 ， 为 低 
级 的 服务 提供 了 高 级 的 接口 。 然 而 ， 有 一 些 区 别 能 显示 出 我 们 使 用 的 是 框架 而 不 是 库 "。 
。 抽象 的 层次 
框架 会 比 库 在 更 高 的 抽象 层次 上 工作 。 例 如 ，3D 库 或 许 支持 角色 动画 的 蒙 皮 ， 而 3D 
框架 则 会 将 蒙 皮 后 的 网 格 及 一 系列 动画 手势 封装 起 来 ， 成 为 一 个 化 身 (avatar) 。 框 架 会 
根据 用 户 的 输入 自动 地 在 场景 中 移动 化 身 ， 然 后 通过 回调 函数 来 通知 我 们 。 
。 默认 行为 
框架 提供 了 默认 行为 ， 例 如 ， 当 一 个 场景 创建 后 ， 一 个 默认 的 相机 就 会 放 在 里 面 一 个 已 
知 的 位 置 和 角度 。 好 的 框架 还 会 竭尽 全 力 地 让 开发 者 覆盖 默认 的 行为 ， 以 提供 灵活 性 。 
。 扩展 性 
框架 加 强 了 扩展 性 ， 允 许 第 三 方 扩展 的 开发 和 自 定义 。 最 好 的 框架 会 一 方面 提供 强大 的 
内 建 组 件 ， 另 一 方面 还 允许 扩展 或 彻底 替换 系统 中 一 部 分 。 
。 反 向 控制 流 
或 许 框架 最 显著 的 特征 就 是 开发 者 并 不 能 控制 流程 。 开 发 者 只 是 简单 地 提供 回调 函数 ， 
或 者 覆盖 方法 来 实现 应 用 程序 的 特殊 功能 。 回 想 一 下 WebGL 应 用 的 典型 页 面 创建 过 
程 : 创建 好 场景 、 初 始 化 泻 染 器 、 调 用 运行 循环 。 使 用 一 个 WebGL 框架 后 ， 开 发 者 只 
需要 提供 场景 创建 的 代码 ， 由 框架 来 完成 剩余 部 分 的 搭建 。 
框架 和 库 还 有 一 个 非 技术 性 方面 的 区 别 : 框架 往往 更 极端 。 它 被 认为 是 双 刃 剑 ， 像 浮 士 德 
式 的 交易 那样 可 以 让 我 们 快速 开发 并 投向 市 场 ， 但 最 终 在 项 目 结束 前 会 偷 走 我 们 的 灵魂 。 
框架 可 以 快速 提供 我 们 所 需 的 90% 功能 在 开发 早期 让 我 们 过 度 自信 一 一 然后 在 实现 最 
后 10% 的 时 候 变 得 异常 复杂 。 框 架 很 难 调试 和 优化 ， 因 为 我 们 使 用 了 其 他 人 的 代码 。 如 果 
你 曾经 使 用 过 Zend 或 Rails 那样 的 Web 开发 框架 ， 会 体会 过 类 似 的 哀伤 。 因 此 ， 许 多 开 
发 者 干脆 避免 使 用 框架 。 相 比 之 下 ， 像 jQuery 那样 非 侵入 式 的 库 获 得 了 开发 者 的 支持 ， 
为 它 提供 了 强大 的 功能 ， 但 没有 带 来 肝 烦 。 


开发 者 是 有 激情 的 生物 ， 就 像 其 他 人 一 样 。 没 有 什么 可 以 像 关于 良好 的 老式 框 
架 的 争吵 那样 能 激发 开发 者 的 热情 了 。 如 果 你 看 到 有 人 正在 争吵 ， 最 好 避 而 远 
之 。 对 于 在 自己 的 项 目 中 使 用 框架 ,我 有 种 很 强烈 的 感受 ， 可 以 概括 为 : 

我 热爱 框架 …… 只 要 它 是 我 的 。 














































































































注 1: 基于 维基 百科 条 目 中 对 软件 框架 的 详细 讨论 。 
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不 管 你 对 框架 的 感受 如 何 ， 你 在 构建 任意 大 小 的 3D 应 用 时 都 会 面临 本 章 所 讨论 的 问题 。 
你 同样 会 面临 一 个 选择 开发 你 自己 的 框架 ， 或 者 使 用 现 有 的 框架 ， 抑 或 准备 好 写 大 量 额 
外 的 代码 。 














9.1.2 WebGL 框 架 需 求 


我 们 可 以 将 浏览 器 看 成 一 个 2D 应 用 框架 。DOM 和 CSS 提供 了 一 系列 预定 义 的 可 视 对 象 ， 
由 浏览 器 来 进行 演 染 。 应 用 开发 由 提供 一 些 回调 函数 来 构成 ， 这 些 回调 函数 基于 用 户 行为 
产生 ， 比 如 点 击 一 个 按钮 、 页 面 已 经 加 载 完成 等 。 当 应 用 想 要 改变 页 面 的 外 观 或 内 容 时 ， 
它 设 置 一 个 或 多 个 属性 ， 由 浏览 器 自动 更 新 呈现 。 
但 不 幸 的 是 ， 除 了 CSS 3D 变换 以 外 ， 浏 览 器 预定 义 的 对 象 都 不 能 扩展 到 三 维 。 从 HIML5 
开始 ， 浏 览 器 架构 的 重点 从 预先 定义 可 视 对 象 (比如 文本 、 滚 动 条 、 按 钮 等 ) 转向 了 允许 
控制 演 染 和 其 他 系统 级 别 的 功能 。WebGL 和 Canvas 允许 我 们 绘制 我 们 想 要 的 任何 东西 ， 
但 所 有 其 他 工作 都 需要 我 们 自己 动手 。 一 旦 进入 Canvas 元 素 的 世界 ， 我 们 就 需要 创建 自 
己 的 场景 图 、 事 件 模 型 、 交 互 、 行 为 、 动 画 以 及 过 渡 一 一 或 者 更 好 的 方式 是 使 用 现成 的 框 
架 来 帮 我 们 完成 这 些 工作 。 
WebGL 应 用 对 框架 设计 提出 了 独特 的 要 求 。 除 了 面临 着 一 大 堆 经 典 的 3D 特有 问题 外 ， 还 
需要 满足 能 够 在 基于 浏览 器 的 平台 上 工作 这 一 需求 。 一 个 WebGL 框架 应 该 包含 以 下 大 部 
分 功能 。 
。 环境 设置 
框架 检查 是 否 支 持 WebGL， 然 后 创建 绘图 上 下 文 以 及 其 支持 绘制 的 其 他 对 象 。 它 同时 
还 增加 了 对 DOM 事件 的 监听 ， 比 如 窗口 缩放 、 鼠 标 和 键盘 输入 、WebGL 上 下 文 丢 失 
及 其 他 页 面 事件 ， 然 后 在 需要 的 时 候 分 配 到 应 用 中 。 
。 能 力 检 测 和 降级 
框架 检测 各 种 浏览 器 能 力 ， 然 后 提供 可 能 的 填充 (polyfill) 或 提供 降级 ， 比 如 如 果 不 支 
持 WebGL 就 使 用 2D Canvas 进行 绘制 。 
。 默认 场景 创建 
框架 创建 一 个 空 的 场景 ， 该 场景 可 能 包含 一 个 默认 的 相机 和 默认 光照 。 
。 模拟 /运行 循环 
框架 提供 运行 循环 ， 应 用 通过 提供 事件 的 回调 函数 和 覆盖 方法 来 实现 应 用 特有 的 功能 。 
框架 或 许 还 会 确定 一 个 严格 的 时 钟 概念 或 时 间 模 型 ， 应 用 必须 遵守 它 来 获得 一 致 的 行为 。 
。 图 形 和 洽 染 
框架 提供 对 象 来 浑 染 图 形 。 例 如 在 基于 Threejjs 的 框架 中 ， 它 意味 着 由 框架 来 管理 对 
Three.js 对 象 的 访问 。 
。 对 象 和 事件 模型 
框架 指定 了 对 象 属性 的 统一 模型 ， 对 象 在 层次 结构 或 图 中 和 其 他 对 象 的 关系 ， 以 及 对 象 
如 何 通过 事件 、 回 调 、 访 问 方 法 来 进行 交互 。 
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交互 

框架 自动 将 鼠标 及 其 他 输入 映射 到 场景 中 的 具体 对 象 ， 并 在 对 象 被 点 击 、 拖 搜 时 通知 应 
用 程序 。 

导航 /查看 方法 

框架 可 能 会 提供 一 个 或 多 个 导航 模型 ， 它 是 指 相 机 在 场景 中 移动 的 高 级 模型 (比如 第 一 
人 称 射 击 )， 用 来 处 理 碰撞 和 地 形 跟 随 ， 或 者 旋转 相机 来 查看 一 个 特定 物体 。 还 可 能 会 
有 内 建 逻辑 来 切换 相机 和 场景 间 的 过 渡 。 第 一 人 称 射击 导航 模型 或 许 还 经 常 定义 在 多 人 
环境 下 使 用 一 个 化 身 来 代表 用 户 。 












































行为 和 动画 
框架 会 有 预定 义 的 行为 ， 从 简单 的 物体 随时 间 旋 转 和 变换 ， 到 由 交互 触发 的 复杂 动画 序列 。 
物理 











有 些 框架 提供 了 丰富 的 物理 模型 : 以 一 定 速 率 在 一 个 方向 上 移动 ， 设 置 重力 ， 检 测 物体 
间 的 碰撞 等 。 

资源 加 载 

框架 为 程序 员 自 动 加 载 模型 、 纹 理 、 视 频 和 声音 ， 并 在 资源 载 入 完成 后 通知 应 用 。 强 大 
的 框架 其 至 包括 客户 一 服务 器 端 加 载 的 方案 ， 能 够 流 式 加 载 3D 数据 和 动画 ， 渐 进 式 提 
供 高 精度 的 网 格 细节 。 
场景 工具 
框架 有 对 场景 图 控制 的 广泛 支持 。 查 询 API 会 查找 特定 类 型 的 对 象 ， 或 者 使 用 正则 表 
达 式 或 选择 符 来 匹配 id， 然 后 应 用 各 种 操作 : 修改 材质 属性 、 应 用 3D 变换 ， 增 加 或 删 
除 子 节点 ， 显 示 或 隐藏 物体 。 

内 存 管理 

尽管 基于 JavaScript 的 应 用 有 自动 垃圾 清理 机 制 ， 但 复杂 的 应 用 需要 注意 内 存 是 如 何以 
及 何 时 分 配 的 。 不 然 的 话 ， 垃 圾 回收 清理 会 在 不 合 时 宣 的 时 候 发 生 ， 影 响 帧 率 ， 进 而 影 
响 用 户 体验 。 有 些 框架 提供 了 智能 的 内 存 管理 服务 ， 来 帮助 避免 这 些 问题 (在 第 12 章 
有 关于 这 个 话题 的 更 多 讨论 )。 

性 能 支持 /优雅 降级 

框架 或 许 会 根据 帧 率 和 资源 占用 情况 来 自动 调节 分 辩 率 或 泻 染 质量 ， 目 标 是 提供 一 致 的 
用 户 体验 。 

扩展 机 制 

好 的 框架 不 会 限定 开发 者 只 使 用 内 建 的 组 件 ， 它 们 允许 进行 扩展 。 对 于 一 个 WebGL 框 
架 来 说 ， 这 意味 着 提供 行为 的 回调 、 履 盖 交 互 ， 最 重要 的 是 ， 可 以 自 定 义演 染 来 改变 视 
觉 外 观 。 







































































这 个 列表 很 长 ， 创 建 一 个 高 质量 的 3D 应 用 需要 做 很 多 事情 ， 而 框架 会 大 有 帮助 。 现 在 已 
经 有 几 个 使 用 WebGL 的 好 框架 ， 我 们 在 下 一 节 中 进行 介绍 。 
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9.2 WebGL 框 架 概况 


WebGL 框架 分 为 两 类 : 游戏 引擎 和 展示 框架 。 游 戏 引 敬一 般 更 强大 ， 但 更 难 使 用 和 掌握 ; 
而 展示 框架 更 适合 创建 相对 简单 的 应 用 ， 比 如 各 在 页 面 中 的 、 只 有 基本 交互 的 模型 。 本 节 
介绍 了 许多 在 本 书 编写 时 还 在 开发 中 的 WebGL 框架 。 


9.2.1 游戏 引擎 


如 果 你 的 目标 是 开发 一 个 顶尖 的 WebGL 游戏 ， 你 应 该 考虑 使 用 这 几 年 出 现 的 诸多 游戏 引 
擎 之 一 。 游 戏 引 擎 和 框架 间 的 不 同比 较 微 妙 。 一 般 来 说 ， 游 戏 引 擎 比 普通 框架 提供 更 多 的 
功能 。 但 另 一 方面 ， 它 们 是 为 更 加 有 经 验 的 开发 人 员 设 计 的 。 游 戏 开 发 包含 复杂 的 技术 ， 
而 游戏 引擎 反映 了 这 一 点 。 
有 几 个 可 选 的 WebGL 引擎 。 它 们 之 间 的 能 力 差别 很 大 ， 对 经 验 技能 的 要 求 也 有 很 大 不 
同 。 有 些 引 擎 是 开源 的 ， 有 些 则 不 是 。 有 些 可 以 免费 使 用 ， 而 有 些 需 要 购买 授权 、 缴 纳 托 
管 费 ,或 者 是 鼓励 你 通过 它 的 销售 网 络 来 发 布 游戏 。 这 里 列 出 的 游戏 引擎 没有 一 个 使 用 
Three.js 来 进行 渲染 ， 而 是 选择 了 控制 整个 流程 。 有 一 些 权 衡 ， 需 要 在 你 评估 项 目 引 擎 的 
时 候 考 虑 。 
。 playcanvas (http://www.playcanvas.com/) 
位 于 伦敦 的 playcanvas 开发 了 一 个 功能 丰富 的 引擎 和 基于 云 的 编辑 工具 。 该 编辑 工具 的 
特色 有 : 可 以 实时 协同 编辑 场景 ， 来 支持 团队 开发 :集成 了 GitHub 和 Bitbucket， 在 社 
会 媒体 网 站 上 一 键 发 布 。 图 9-1 显示 了 运行 中 的 playcanvas 游戏 。 
























































。 Turbulenz (http://biz.turbulenz.com/developers/) 
一 个 极其 强大 、 开 源 且 免费 的 游戏 引擎 ， 提 供 了 可 下 载 的 SDK。 如 果 你 想 要 在 这 个 
公司 的 网 络 (http://biz.turbulenz.com/developers/) 上 发 布 游戏 ， 它 会 收取 一 些 提成 。 
Turbulenz 在 API 上 很 复杂 ， 它 提供 了 一 大 堆 类 ， 学 习 曲 线 陡峭 。 它 明显 是 给 经 验 丰富 
的 游戏 开发 者 使 用 的 。 

。 Goo Engine (http:Wwww.gootechnologies.comy/) 
在 本 书 编写 的 时 候 ， 这 个 引擎 还 处 于 内 部 测试 阶段 。 它 在 网 站 上 自 夺 有 许多 传统 游戏 引 
擎 的 功能 ， 并 且 通 过 WebGL 来 实现 跨 平 台 。 它 的 网 站 的 技术 和 授权 信息 很 少 ， 但 示例 
很 漂亮 ， 如 图 9-2 所 示 。 





























图 9-2; 一 款 基于 Goo Engine (http:/www.gootechnologies.com/) 开发 的 水 中 冒险 游戏 ;图 片 来 
自 Pearl Boy 


。 Babylon.js (http:/www.babylonjs.com/) 
微软 最 近 加 入 了 WebGL 的 浪潮 ， 给 了 它 一 个 巨大 的 推动 。Babylon.js 是 一 个 易于 使 用 
的 引擎 ， 在 功能 和 易 用 性 方面 介 于 Three.js 和 专家 型 游戏 引擎 之 间 。 示 例 网 址 展示 了 
Babylon.js 广泛 的 应 用 ， 从 太空 射击 到 建筑 训 览 都 有 。 
。 KickJS (http:/www.kickjs.org/) 
由 Morten Nobel-Jgrgensen 创建 的 开源 游戏 引 敬 和音 染 库 。 这 个 项 目 由 Nobel-Jgrgensen 
的 学 术 工 作 发 展 而 来 。 它 看 起 来 开发 不 足 且 缺少 支持 ， 所 以 要 用 的 话 得 小 心 。 我 在 这 里 
包括 它 ， 是 因为 在 提 过 的 所 有 引擎 中 ，KickJS 是 最 遵循 现代 游戏 引擎 设计 规范 的 〈 关 
于 这 个 话题 我 们 将 在 介绍 Vizi 的 时 候 详细 讨论 ) 。 如 果 没 有 其 他 选择 了 ， 它 可 以 作为 设 
计 你 自己 的 框架 的 重要 参考 。 
可 以 看 到 ， 有 许多 潜在 的 WebGL 游戏 引擎 可 选 。 你 或 许 甚 至 会 使 用 游戏 引擎 来 开发 非 游 
戏 的 应 用 。 但 要 记 住 ， 游 戏 引擎 的 学 习 曲 线 陡峭 ， 所 以 需要 保证 解决 方案 与 问题 相 适 应 。 
对 于 简单 点 儿 的 视觉 应 用 ， 你 可 以 使 用 更 简单 的 3D 框架 。 下 一 节 我 们 将 对 其 中 一 些 进行 
介绍 。 
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9.2.2 ”展示 框架 


游戏 只 是 可 以 基于 WebGL 开发 的 3D 应 用 中 的 一 种 。 对 于 很 多 非 游戏 应 用 ， 比 如 页 面 图 
形 、 电 子 商务 产品 展示 或 者 科学 可 视 化 ， 使 用 游戏 引擎 类 似 于 杀 鸡 用 牛刀 。 展 示 应 用 通常 
只 需要 加 载 简单 的 场景 到 页 面 中 ， 播 放 几 个 动画 ， 并 通过 修改 几 个 属性 来 响应 用 户 输入 。 
之 前 我 们 介绍 过 ， 即 便 是 这 些 基 本 操作 在 Three.js 中 也 需要 大 量 额外 的 开发 工作 ， 所 以 我 
们 使 用 框架 来 辅助 开发 。 以 下 是 儿 个 可 以 考虑 的 通用 3D 展示 框架 。 


1. tQuery 
tQuery (http://jeromeetienne.github.io/tquery/) 由 Jerome Etienne 创建 。Jerome 管理 着 人 
气 博客 Learning Three.js (http://learningthreejs.com/)， 其 中 包含 了 大 量 Three.js 开发 诀 
窍 和 技巧 。 


tQuery 模仿 了 jQuery， 它 的 想法 是 既 有 Three.js 的 能 力 又 有 jQuery API 的 易 用 性 ， 也 就 是 
说 能 够 使 用 非常 简单 的 API 来 创建 Three.js 场景 图 。 它 使 用 了 链 式 函数 的 编程 风格 ， 支 持 
通过 回调 来 实现 高 级 的 交互 行为 。 使 用 tQuery 可 以 省 去 大 量 Three.js 的 硬 编码 。 或 许 将 
tQuery 称 为 框架 并 不 正确 ， 因 为 它 所 模仿 的 jQuery 的 精神 是 无 侵入 的 库 。 如 采 你 是 一 个 
Threejs 开发 者 ， 想 少 敲 些 键盘 ， 你 应 该 认真 研究 一 下 它 。 


例 9-1 展示 了 一 个 简单 的 代码 段 ， 它 的 功能 是 使 用 tQuery 将 一 个 圆 环 体 放 到 页 面 中 ， 和 前 
几 章 使 用 Three.js 的 例子 进行 对 比 ， 你 会 看 到 框架 如 何 让 3D 开发 变 得 简单 。 


例 9-1: 使 用 tQuery 创建 一 个 简单 的 场景 
<!doctype html><title>Minimal tQuery Page</title> 
<script src="tquery-bundle.js"></script> 
<body><script> 
var world = tQuery.createWorld().boilerplate().start(); 
var object = tQuyery.createTorus().addTo(world); 
</script></body> 


Etienne 的 设计 理念 可 以 大 概 总 结 为 “让 3D 开发 尽 可 能 像 2D 开发 那样 "。Web 开发 者 已 经 
了 解 jQuery 了 ， 给 他 们 一 个 像 jQuery 那样 的 API 去 开发 3D 应 用 ， 他 们 立刻 就 会 具有 生产 
力 。 这 个 逻辑 很 难 反 驱 。 

2. Voodoo.js 

居住 在 西雅图 的 Brent Gunning 致力 于 让 人 人 都 能 创建 3D 应 用 。 在 因 WebGL 的 能 力 而 
兴奋 却 失 望 于 其 编程 难度 的 前 提 下 ， 于 是 Brent Gunning 创建 了 Voodoo.js (http://www. 
Voodoojs.com/)。Voodoo.js 的 目标 是 让 创建 3D 应 用 变 得 简单 且 容 易 集 成 到 页 面 中 。 
Gunning 在 第 一 次 发 布 Voodoojjs 的 时 候 在 他 的 博客 上 做 了 如 下 总 结 : 


在 今天 的 Web 中 ，3D 只 是 一 个 玩具 ， 一 个 嗪 头 。 创 建 任 何 3D 形式 的 内 容 都 需要 大 量 
额外 工作 且 几 乎 无 法 轻易 重用 。 更 糟糕 的 是 ， 只 因 它 多 了 一 个 维度 ， 我 们 就 将 3D 场景 
放 到 Canvas 中 ， 与 2D 内 容 隔离 开 来 。 这 是 设计 上 的 吉 梦 ， 我 想 做 点 什么 改进 它 。 因 
此 ， 我 很 高 兴 地 宣布 Voodoo 的 第 一 次 公开 发 布 ， 版 本 是 0.8.0 beta。 


Gunning 的 愿景 不 仅 包 括 简单 的 拖 搜 开 发 ， 还 包括 一 个 可 重用 的 生态 系统 ， 包 括 了 对 象 、 
组 件 、 视 觉 样式 和 主题 。Voodoo.js 框架 由 一 系列 小 巧 的 预制 功能 的 类 构成 ， 包 括 模型 的 加 
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载 和 查看 、 基 于 鼠标 的 交互 、 几 个 可 选 配置 。 这 个 框架 基于 Three.js 开发 ， 因 此 理论 上 它 
应 该 很 容易 扩展 和 自 定义 新 的 对 象 类 型 。 例 9-2 来 自 Voodoo.js 首页 ， 它 只 使 用 一 个 函数 
调用 就 创建 了 一 个 3D 对 象 ， 然 后 插入 到 页 面 元 素 example2。 这 不 能 再 简单 了 。 它 的 效果 
如 图 9-3 所 示 。 


例 9-2: 使 用 Voodoo.js 将 一 个 3D 对 象 插 入 到 页 面 中 
new VoodooJsonModel({ 
elementId: 'example2', 
jsonFile: '3d/tree.json', 
offsetwidthMultiplier: 2.0 / 3.0， 
scale: 50， 
rotationX: Math.PI / 2.0， 
I /2.0 








rotationY: Math .P 
]); 









Reusable Object: 








“The art challenges thé nology, and the technology inspires the art.* - John Lasseter 











图 9-3: Voodoo.js 首页 (http://www.voodoojs.com/) ， 特 点 在 于 有 几 个 内 谋 的 3D 对 象 


3. PhiloGL 

PhiloGL (http://www.senchalabs.org/philogl/) 是 数据 可 视 化 科学 家 Nicolas Garcia Belmonte 
在 Sencha 公司 的 实验 室内 创建 的 实验 项 目 。PhiloGL 的 目标 是 让 WebGL 开发 尽 可 能 简单 
和 有 趣 ， 就 像 使 用 任何 主流 框架 进行 开发 一 样 。Garcia 在 介绍 性 博文 (https://www.sencha. 
com/blog/) 中 描述 了 这 一 设计 理念 。 尽 管 这 个 框架 是 实验 性 质 的 ， 但 它 值得 一 看 。Sencha 
公司 开发 了 世界 级 的 用 户 界面 框架 ， 十 分 精通 如 何 使 用 HTMLS5 创建 高 效 的 用 户 界 面 。 例 
9-3 展示 了 使 用 PhiloGL 创建 一 个 简单 场景 的 代码 。 通 过 定义 儿 个 JavaScript 对 象 ， 我 们 
创建 了 包含 一 个 带 纹理 球形 的 场景 。PhiloGL 的 网 站 上 有 几 个 可 以 工作 的 例子 ， 包 括 来 自 
Learning WebGL (http://learningwebgl.com/blog/) 的 所 有 教程 。 
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例 9-3: 使 用 PhiloGL 创建 一 个 简单 的 3D 场景 
// 创建 一 个 应 用 
PhiloGL('canvasId', { 
camera: { 
position: { 
XxX: 0, y: 0, z: -7 

















} 
}， 
scene: { 
lights: { 
enable: true, 
ambient: { r: 0.5, g: 0.5, b: 0.5 }, 
directional: { 
color: { r: 0.7, g: 0.7, b: 0.9 }, 
direction: { x: 1, y: 1, z: 1 } 
} 
} 
}， 


textures: { 
src: ['moon.gif'] 








}， 
events: { 
onClick: function(e) { 
/* 在 此 编写 事件 响应 */ 
} 
}， 


onError: function() { 
alert("There was an error creating the app."); 
}， 
onLoad: function(app) { 
// 初始 化 应 用 
// 往 场 景 中 添加 物体 
scene.add(moon) 
// 动画 
setInterval(draw, 1000/60); 
// 绘制 场景 
function draw() { 
// 泻 染 月 球 
scene.render(); 


} 





} 
}s 


9.3 Vizi: 一 个 基于 组 件 的 用 于 可 视 化 Web 应 用 
的 框架 


现在 到 了 仔细 研究 基于 框架 的 3D 开发 的 时 候 。 我 们 将 使 用 一 个 足够 通用 的 框架 ， 以 覆盖 
量 可 能 的 使 用 场景 。 尽 管 万 能 的 3D 系统 并 不 存在 ， 但 在 应 用 中 还 是 有 许多 通用 的 模式 。 
据 此 我 创建 了 Vizi 我 自己 设计 的 一 个 WebGL 框架 。 我 将 用 它 来 开发 接 下 来 儿童 中 的 
例子 。 本 市 通过 深入 探索 基于 框架 开发 的 概念 来 介绍 Vizi。 























A 
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9.3.1 背景 和 设计 理念 

正如 tQuery、Voodoojj 及 PhiloGL 的 开发 者 那样 ， 我 对 WebGL 开发 的 状况 感到 失望 。 我 
是 Mr.doob 的 忠实 粉丝 之 一 ， 但 我 认为 光 有 Three.js 还 不 足以 开发 产品 级 质量 的 应 用 。 我 
们 这 里 讨论 的 大 部 分 问题 ， 甚 实在 几 年 前 的 3D 框架 和 游戏 引擎 中 就 已 经 解决 了 。 底 层 的 
平台 当然 在 这 些 年 中 已 经 进化 了 ， 但 问题 大 体 上 还 是 一 样 的 : 载 入 场景 内 容 、 设 置 相机 、 
绘制 一 些 对 象 、 根 据 计 时 器 和 用 户 输入 来 移动 物体 、 重 复 上 述 步 又。 

这 几 年 游戏 引擎 的 设计 发 生 了 变化 。 最 近 二 十 年 游戏 产业 变 得 很 有 活力 ， 可 以 说 它 触发 了 
计算 机 历史 中 一 些 最 大 的 创新 ， 包 括 软 件 引 警 的 设计 。 最 为 显著 的 是 它 从 基于 类 和 继承 的 
架构 转向 了 基于 组 件 和 集成 的 架构 (这 或 许 看 起 来 是 技术 上 的 区 别 ， 但 它 有 极 大 的 影响 ， 
我 们 稍 后 会 看 到 ) 。 基 于 前 面 介 绍 的 许多 3D 开发 项 目 ， 并 换个 新 的 视角 基于 当前 游戏 引擎 
的 最 佳 实践 ， 我 决定 做 一 个 新 的 探索 ，Vizi 就 是 这 样 诞生 的 。 

Vizi 的 目标 是 让 快速 开发 有 趣 的 3D 应 用 变 得 简单 。 在 功能 方面 ，Vizi 介 于 游戏 引擎 (如 
playcanvas) 和 展示 框架 (如 Voodoo.js) 之 间 。 本 章 的 产品 配置 场景 很 适合 使 用 Vizi， 它 
是 一 个 有 多 个 交互 对 象 的 场景 ， 基 于 用 户 输入 动态 更 新 ， 模 型 是 按 需 加 载 的 ， 有 复杂 的 视 
角 和 基于 相机 的 导航 。 我 相信 这 些 功 能 体现 了 WebGL 开发 最 具 优势 的 地 方 ， 因 此 这 也 是 
我 最 想 要 强化 的 设计 之 处 。 


图 9-4 展示 了 一 个 Vizi 应 用 原型 ， 是 一 个 电子 商务 网 站 概念 ， 虚 拟 车 的 展示 。 高 精度 的 图 
片 窗 格 在 场景 中 间 缓 慢 地 旋转 ， 像 旋转 木马 一 样 。 窗 格 在 精巧 的 网 格 背 景 上 投影 。 页 面 加 
载 儿 秒 钟 后 ， 一 个 完整 的 3D 车 模型 被 举 上 展示 台 。 高 清 的 车 身上 反射 了 背后 的 网 格 环境 。 
点 击 窗 格 会 让 它 向 前 居中 放大 ， 播 放 视频 广告 。2D 的 用 户 界面 元 素 在 周围 提供 了 访问 其 
他 信息 及 网 站 其 他 部 分 的 渠道 。 这 只 是 一 个 概念 ， 但 它 描绘 了 Vizi 的 核心 想法 : 混合 使 用 
2D 和 3D 内 容 为 电子 商务 及 其 他 Web 应 用 提供 新 型 交互 。 




































































图 9-4: 基于 Vizi 开发 的 概念 车 展示 应 用 ; 车 模型 来 自 be fast (http://www.turbosquid.com/Search/ 
Artists/be-fast) ， 视 觉 及 环境 设计 来 自 TC Chang (http:/www.tcchang.com/) 
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9.3.2 Vizi 架 构 
Vizi 的 架构 设计 受到 现代 游戏 引 敬 设计 原则 的 启发 。 尽 管 3D 游戏 的 要 求 比 其 他 视觉 应 用 
更 高 ， 但 它们 有 大 量 的 共同 点 。 有 些 非 游戏 应 用 需要 游戏 引擎 中 的 许多 功能 ， 例 如 ， 教 育 
仿真 或 许 需要 碰撞 、 物 理 及 化 身 ， 尽管 它 并 不 需要 快速 运行 ， 也 没 人 会 被 炸 飞 。 
Vizi 架构 的 一 个 主要 特色 是 基于 组 件 的 对 象 模型 (component-based object model) 。 这 反 
上 映 了 现代 趋势 ， 即 从 传统 的 基于 继承 的 设计 转向 了 组 件 的 集合 。 它 有 一 个 基础 对 象 类 型 
Vizi.0bject， 而 不 仅 是 组 件 的 容器 。 组 件 实现 了 大 部 分 的 功能 ， 比 如 一 个 Visual 组 件 实 
现 了 几何 体 和 材质 、 一 个 Picker 组 件 实现 了 基于 每 个 对 象 的 鼠标 事件 派发 、 一 个 Camera 
组 件 实 现 了 视图 。 基 于 组 件 的 系统 提供 了 获得 能 力 的 统一 模型 ， 它 允许 非常 灵活 的 实现 以 
及 高 可 重用 性 。 它 同样 是 支持 扩展 的 关键 。 
Vizi 架构 还 有 以 下 亮点 。 
。 应 用 对 象 
单 例 应 用 对 象 (singleton application object) 负责 WebGL 上 下 文 的 创建 、DOM 事件 处 
理 器 以 及 Three.js 的 初始 化 。 应 用 对 象 实现 了 运行 循环 ， 对 象 只 需要 加 入 到 应 用 中 ， 就 
能 在 每 帧 动画 更 新 自己 。 


。 模拟 及 事件 模型 
Vizi 有 一 个 所 有 对 象 使 用 的 标准 时 间 轴 。 事 件 在 定义 好 的 时 间 点 上 触发 ， 并 遵循 预定 的 
规则 。 一 个 对 象 可 以 发 布 其 他 对 象 订阅 的 事件 。 对 象 可 以 使 用 监听 器 来 订阅 事件 ， 或 者 

在 行为 链 上 直接 连接 到 其 他 对 象 的 事件 上 。 这 让 创建 行为 和 交互 变 得 非常 简洁 。 

。 服务 化 架构 
所 有 子 系统 都 以 黑 盒 服务 的 方式 构建 。 在 初始 化 和 执行 阶段 ， 应 用 将 时 间 、 事 件 、 图 形 
及 输入 等 委托 给 了 各 个 服务 ， 而 不 关心 这 些 服务 具体 是 怎么 做 的 。 这 让 添加 新 的 服务 变 
得 简单 ， 比 如 并 没有 包含 在 核心 版 本 中 的 多 用 户 网 络 。 

。 图 形 
所 有 图 形 都 是 使 用 Threejs 绘制 的 。Vizi 并 没有 将 Threejjs 隐藏 起 来 ， 而 是 直接 使 用 它 ， 
将 Threejs 对 象 通过 组 件 化 的 结构 封装 起 来 ， 使 得 其 他 Vizi 对 象 可 以 方便 地 与 它们 进行 
通信 。 

。 交 玉 
Vizi 支持 基于 每 个 对 象 的 鼠标 事件 ， 底 层 使 用 Threejs 的 Projector 类 来 实现 点 击 检测 。 
这 使 得 鼠标 和 触摸 输入 的 接口 变 得 简单 。Vizi 还 提供 了 预 建交 互 对 象 来 实现 不 同类 型 的 
拖 搜 (比如 在 平面 或 球体 上 )。 

。 行为 
Vizi 包含 了 多 种 预 建行 为 ， 能 自动 旋转 、 移 动 、 弹 跳 、 高 亮 等 来 改变 对 象 的 状态 。 

。 高 级 视图 模型 
Vizi 允许 定义 多 个 相机 ， 可 以 轻松 在 它们 之 间 切 换 。Vizi 同时 支持 多 种 导航 模式 ， 比 如 
物体 查看 、 第 一 人 称 游戏 、 建 筑 浏览 等。 
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。 方便 自 定义 
自 定义 组 件 可 以 实现 全 新 的 行为 、 交 互 和 相机 控制 等 几乎 所 有 事情 。 组 件 继承 自 Vizi. 
Component 的 JavaScript 对 象 。 开 发 者 很 容易 就 能 创建 一 个 新 的 组 件 类 型 ， 并 通过 覆盖 
realize() 和 update() 方法 来 增加 自 定义 功能 。 组 件 可 以 无 侵入 地 添加 到 已 存在 的 对 象 
中 ， 来 增加 原 开发 者 没 想到 的 新 功能 。 

。 预制 结构 
Vizi 允许 开发 者 创建 由 一 组 对 象 组 成 的 可 重用 类 型 。 因 为 Vizi 是 基于 组 件 设计 的 ， 所 
以 类 型 并 不 是 使 用 JavaScript 的 类 来 创建 的 ， 而 是 一 堆 被 称 为 prefab 的 预制 对 象 。 
prefab 由 层次 化 的 游戏 对 象 及 它们 的 组 件 、 一 个 或 多 个 事件 订阅 或 连接 ， 以 及 一 个 控制 
器 脚本 (协调 所 有 部 分 的 交互 ) 构成 。 


Vizi 基于 组 件 的 架构 设计 受到 一 本 书 的 极 大 影响 ， 这 本 书 是 Jason Gregory 的 
教科 书 《 游 戏 引擎 架构 》(Game Engine Architecture,， http://www.gameengine 
book.com/)， 这 是 高 级 引擎 和 框架 设计 师 必 读 之 书 。 这 本 书 涉及 的 范围 很 广 ， 
但 与 本 书 最 相关 的 是 Gregory 对 对 象 模 型 架构 的 探索 。 他 大 力 提 倡 组 件 化 的 
设计 ， 而 不 是 传统 的 类 继承 设计 。 基 于 组 件 的 设计 一 般 更 加 灵活 和 可 扩展 ， 
避免 了 基于 继承 设计 遇 到 的 许多 已 知 问题 ， 尤 其 是 当 复杂 度 上 升 的 时 候 。 


Vizi 同样 受到 Unity (http:Wunity3d.com/) 设计 的 启发 ，Unity 是 今天 在 独立 开 
发 者 和 小 工作 组 中 最 流行 的 商业 游戏 引擎 。Unity 很 好 地 体现 了 Gregory 基于 
组 件 化 引擎 设计 的 思想 。 在 本 书 编写 之 际 Unity 还 不 支持 WebGL 。Unity 早 在 
HTMLS5 流行 前 就 已 开发 出 来 了 ， 所 以 它 使 用 了 它 自己 的 脚本 语言 和 泻 染 系 
统 。 如 果 Unity 支持 HTML5 和 WebGL， 我 或 许 会 觉得 没 必 要 创建 Vizi。 






































9.3.3 Vizi 入 门 


为 了 开始 学 习 Vizi， 我 们 先 要 从 GitHub (https://github.com/tparisi/Vizi) 项 目 中 获得 最 新 版 
本 的 代码 。 在 engine/build/ 目录 下 ， 你 会 看 见 几 个 文件 ， 复 制 一 个 vizijs (未 压缩 的 debug 
版 本 ) 文件 或 vizi.min.js (压缩 后 的 release 版 本 ) 到 你 的 项 目 中 。 

现在 ， 只 需要 将 Vizi 脚本 插入 你 的 页 面 中 就 可 以 开始 使 用 了 : 


<script src="../<path_ to vizi>/vizi.js"></script> 











Vizi 有 多 种 不 同类 型 的 版 本 。 这 两 个 文件 将 所 有 依赖 都 打包 进来 了 ， 包 括 
Three.js、Tween.js、RequestAnimationFrame.js 以 及 几 个 支持 Three.js 的 对 
象 。 如 果 你 不 想 要 包含 外 部 依赖 的 版 本 ， 可 以 使 用 无 依赖 版 本 ， 在 你 页 面 
的 其 他 地 方 自行 插入 依赖 。 当 然 ， 如 果 不 小 心 可 能 会 有 版 本 冲突 。 请 查看 
README 文件 及 版 本 公告 来 了 解 更 多 详情 ， 以 及 查阅 参考 附录 来 了 解 准备 
自 定义 版 本 Vizi 的 更 多 信息 。 




















注 2: Unity 5 已 经 支持 。 一 一 译 者 注 




















3D 引 擎 和 框架 | 201 


9.3.4 一 个 Vizi 应 用 示例 

让 我 们 来 看 一 个 具体 的 例子 ， 通 过 它 来 了 解 Vizi 框架 的 强大 。 在 你 的 浏览 器 中 打开 示例 文 
件 Chapter 9/vizicube.html。 你 应 该 会 看 见 熟悉 的 东西 ， 它 是 第 2 章 和 第 3 章 的 带 纹理 立方 体 ， 
基于 Vizi 重 写 了 一 遍 。 例 9-4 是 基于 Vizi 的 代码 ， 可 以 和 第 3 章 中 例 3-1 的 代码 做 比较 。 

例 9-4: 一 个 Vizi 应 用 的 例子 一 一 旋转 的 立方 体 


<script type="text/javascript"> 





$s(document).ready(function() { 





// 创建 Vizi 应 用 对 象 
var container = document.getElementById("container"); 
var app = new Vizi.Application({ container : container }); 





// 创建 一 个 以 phong 着 色 法 泻 染 的 纹理 映射 立方 体 
var cube = new Vizi .Object; 
var visuyal = new Vizi.Visuyal(l 
{ geometry: new THREE.CubeGeometry(2, 2, 2)， 
material: new THREE.MeshPhongMateriatL( 
{map:THREE. ImageUtils.loadTexture( 
"../images/webgl-logo-256.jpg")}) 





}); 


cube.addComponent(visual); 


// 添加 一 个 旋转 行为 ,使 得 立方 体 更 加 生动 
var rotator = new Vizi.RotateBehavior({autoStart:true}); 
cube.addComponent(rotator); 


// 将 立方 体 向 着 观察 者 旋转 ,以 便 更 好 地 展示 3D 细 市 


cube.transform.rotation.x = Math.PI / 5; 





// 添加 一 个 灯光 来 展示 演 染 效果 
var light = new Vizi.0bject; 
light.addComponent(new Vizi.DirectionalLight); 


// 将 立方 体 和 灯光 添加 到 场景 中 
app.addObject(cube); 
app.addObject(light); 


// 运行 
app.run(); 
} 
); 


</script> 


基于 Vizi， 只 用 了 大 概 40 行 代码 就 创建 了 一 个 旋转 的 带 纹理 立方 体 ， 而 我 们 之 前 使 用 
Three.js 则 需要 写 80 行 代码 。 但 我 们 稍 后 会 看 到 代码 量 少 只 是 其 中 的 一 个 优点 。 我 们 来 通 
读 这 个 例子 。 首 先 我 们 创建 了 一 个 新 的 应 用 对 象 ， 类 型 是 Vizi.Application， 并 将 容器 元 
素 传 递 给 它 。 这 个 操作 在 内 部 做 了 大 量 工作 : 创建 一 个 Threejs 这 娄 对 象 和 一 个 带 默 认 相 
机 的 空 Threejs 场景 ， 增 加 了 监听 页 面 缩放 、 鼠 标 及 其 他 DOM 事件 的 事件 处 理 程序 。 这 
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些 事情 你 本 来 需要 通过 DOM API 或 调用 Three.js 函数 来 手工 操作 ,但 Vizi 自动 进行 了 处 
理 。 查 看 Vizi 源码 中 的 文件 core/application.js 和 graphics/graphicsThreeJS.js 来 了 解 具体 的 
实现 细节 ， 它 需要 做 许多 事情 。 


接 下 来 ， 我 们 将 对 象 加 入 到 场景 中 。 这 时 轮 到 Vizi 组 件 对 象 模型 出 场 了 。YVizi 场景 中 的 任 
意 对 象 都 是 Vizi.0bject 类 型 的 ， 然 后 我 们 添加 不 同 的 组 件 给 它 。 对 于 立方 体 来 说 ， 我 们 
使 用 Three,js 的 立方 体 几 何 体 和 带 纹 理 的 Phong 材质 创建 了 一 个 Vizi.Visual 对 象 。 注 意 
Vizi 并 没有 定义 自己 的 图 形 对 象 ， 而 是 选择 使 用 Three.js 来 实现 所 有 图 形 。 这 是 有 意 的 选 
择 。 我 们 完全 暴露 了 Three.js 的 强大 功能 ， 而 不 是 试图 隐藏 它 ， 因 此 我 们 可 以 轻松 创建 我 
们 需要 的 任何 视觉 类 型 。 


在 创建 可 视 化 组 件 并 添加 到 对 象 上 后 ， 我 们 添加 了 一 个 行为 。 这 是 Vizi 神奇 的 地 方 。Vizi 
自 带 了 一 堆 预 制 的 行为 ， 我 们 可 以 通过 添加 组 件 的 方式 应 用 到 对 象 上 。 在 这 个 例子 中 ， 我 
们 添加 了 一 个 Vizi.RotateBehavior 行为 ， 设 置 autoStart 标记 为 true， 使 得 对 象 在 应 用 
运行 的 时 候 马 上 开始 旋转 。 
我 们 想 让 立方 体 向 相机 倾斜 ， 以 便于 查看 3D 效果 。 在 Vizi 中 ， 我 们 可 以 通过 修改 对 象 变 
换 组 件 的 rotation 属性 来 实现 。 

// 将 立方 体 向 着 观察 者 旋转 ,以 便 更 好 地 展示 3D 细 节 

cube.transform.rotation.x = Math.PI / 5; 

注意 ， 为 了 方便 ， 默认 为 每 个 Vizi 对 象 都 自动 创建 了 一 个 变换 组 件 。 这 覆盖 了 大 部 分 的 使 
用 场景 。Vizi.0bject 的 构造 器 还 有 一 个 可 选 参数 autoCreateTransform， 如 果 革 个 对 象 不 
需要 变换 组 件 ， 可 以 将 它 设 置 为 false。 


为 了 显示 Phong 着 色 器 的 效果 ,我们 通过 另 一 个 对 象 来 添加 光源 ， 这 个 对 象 中 有 Vizi. 
DirectionalLight 组 件 。 在 后 面 几 章 中 ， 我 们 会 看 到 如 何 避 免 显 式 创建 光源 ， 那 就 是 使 用 
带 灯 光 设 置 的 预制 应 用 模板 。 最 后 ， 我 们 准备 好 运行 应 用 了 ， 于 是 调用 应 用 的 run( ) 方法 。 
这 就 够 了 ， 不 需要 编写 我 们 自己 的 requestAnimationFrame() 函数 来 手动 在 每 个 周期 更 新 立 
方 体 的 旋转 。 


1. 添加 交互 

你 或 许 注 意 到 前 面 几 音 介绍 的 Three.jjs 例子 并 没有 交互 性 ， 部 分 原因 是 我 们 还 没有 介绍 到 
交互 ， 另 一 个 原因 是 使 用 Three.js 创建 交互 涉及 枯燥 的 工作 。Three.js 提供 了 一 个 projector 
对 象 ， 人 允许 我 们 计算 出 当前 鼠标 悬 停 在 哪个 对 象 上 。 但 它 并 没有 封装 成 一 个 事件 接口 或 者 
一 个 点 击 拖 搜 的 模型 。Vizi 框架 通过 组 件 来 实现 自动 化 鼠标 选择 和 事件 分 发 ， 以 此 来 解决 
这 个 问题 。 

让 我 们 添加 一 个 简单 的 交互 行为 到 前 面 的 例子 中 。 我 们 将 只 在 鼠标 基 停 上 去 的 时 候 旋 转 立 
方 体 ， 而 不 是 页 面 加 载 后 。 在 浏览 器 中 打开 文件 Chapter 9/vizicubeinteractive.html， 代 码 如 
例 9-5 所 示 。 粗 体 标注 的 代码 行 显示 了 修改 了 的 部 分 。 这 一 次 我 们 不 在 创建 行为 的 时 候 设 
置 autoRotate 选项 ， 因 此 它 不 会 在 应 用 加 载 的 时 候 就 开始 旋转 。 接 下 来 ， 我 们 添加 一 个 新 
的 组 件 类 型 Vizi.Picker 到 立方 体 对 象 上 。picker 定义 了 通常 的 鼠标 事件 ， 包 括 over 〈 移 
到 元 素 上 )、out (移出 元 素 外 )、up (在 元 素 上 松 开 鼠标 按钮 ) 和 down (在 元 素 上 按 下 鼠 
标 按钮 ) ， 它 们 会 在 鼠标 移动 到 包含 picker 的 对 象 时 触发 。 只 需要 分 别 在 鼠标 悬 停 和 移出 
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的 时 候 添加 事件 监听 ， 来 开始 和 停止 旋转 。 
例 9-5: 使 用 一 个 picker 组 件 来 添加 鼠标 交互 


<script type="text/javascript"> 


$s(document).ready(function() { 





// 创建 Vizi 应 用 对 象 
var container = document.getElementById("container"); 
var app = new Vizi.Application({ container : container }); 








// 创建 一 个 以 phong 着 色 法 泻 染 的 纹理 映射 立方 体 
var cube = new Vizi .Object; 
var visuyal = new Vizi.Visuyal(l 
{ geometry: new THREE.CubeGeometry(2, 2, 2)， 
material: new THREE.MeshPhongMateriatL( 
{map:THREE. ImageUtils.loadTexture( 
"../images/webgl-logo-256.jpg")}) 
]); 


cube.addComponent(visual); 


// 添加 一 个 旋转 行为 ,使 得 立方 体 更 加 生动 
var rotator = new Vizi.RotateBehavior; 
cube.addComponent(rotator); 


// 使 立方 体 可 以 被 选中 
var picker = new Vizi.Picker; 
cube.addComponent(picker); 


// 将 选择 器 和 旋转 器 关联 起 来 , 仅 在 鼠标 悬 停 时 旋转 

picker .addEventListener("mouseover", function() { 
rotator .start(); }); 

picker .addEventListener("mouseout", function() { 
rotator .stop(); }); 


// 将 立方 体 向 着 观察 者 旋转 ,以 便 更 好 地 展示 3D 细 市 


cube.transform.rotation.x = Math.PI / 5; 


// ”添加 一 个 灯光 来 展示 泻 染 效果 
var light = new Vizi.0bject; 
light.addComponent(new Vizi.DirectionalLight); 


// 将 立方 体 和 灯光 添加 到 场景 中 
app.addObject(cube); 
app.addObject(light); 


// 运行 
app.run(); 
} 
); 
</script> 


hl 


这 非常 简单 。 为 了 研究 底层 究竟 发 生 了 什么 





EE 情 ， 让 我 们 看 看 检测 到 3D 对 象 在 鼠标 下 时 
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发 生 了 什么 。 这 Vizi 基于 Three.js 的 THREE.Projector 类 来 实现 选取 功能 的 方式 。 它 并 不 
简单 。 例 9-6 列 出 了 Vizi 图 形 子 系统 的 objectFromMouse() 方法 的 代码 。 这 个 方法 返回 鼠 
标 指针 下 能 找到 的 对 象 ， 它 的 处 理 包 括 以 下 几 步 。 


(1 


Nn 





标 ， 每 个 维度 的 值 的 范围 都 是 -0.5 到 +0.5， 同 时 翻转 y 4 











首先 ， 我 们 将 鼠标 事件 相对 于 元 素 的 坐标 elementX 和 elementY 转换 成 相对 于 视 口 的 坐 











E 标 来 匹配 3D 坐标 系统 。( 注 





意 elementX 和 elementY 并 不 是 标准 的 DOM 鼠标 事件 属性 ， 它 们 在 参数 传递 之 前 ， 会 








由 Vizi 的 DOM 事件 处 理 函 数 计算 好 。 ) 





(2) 当 获 得 了 鼠标 相对 视 


量 vector 中 。 





口 的 坐标 后 ， 需 要 将 它们 转换 到 鼠标 下 面 的 3D 位 置 ， 并 保存 在 变 


(3) 然 后 需要 将 鼠标 相对 于 视 口 的 位 置 从 相机 空间 转换 到 世界 空间 中 。 一 旦 转换 了 位 
置 ， 我 们 就 知道 鼠标 指针 在 世界 空间 中 的 位 置 了 。 为 此 ， 我 们 调用 投影 对 象 的 
unprojectVector() 方法 。( 投 影 对 象 是 在 初始 化 图 形 系 统 的 时 候 创建 的 ， 它 是 THREE. 
Projector 类 型 。) 


(4) 现 在 鼠标 指针 在 场景 中 的 位 置 已 经 计算 出 来 了 ， 我 








门 可 以 创建 一 束 光 线 ， 从 相机 的 世界 


空间 位 置 到 鼠标 的 世界 空间 位 置 。 任 何 和 光线 相交 的 对 象 都 是 “在 鼠标 下 ”的 。 光 线 相 
交 是 通过 THREE.Raycaster 的 intersect0bjects() 方法 来 实现 的 。 向 它 传递 对 象 列表 ， 





它 会 按照 从 前 至 


(5) 最 后 ， 我 们 取得 列表 中 第 一 个 可 见 的 元 素 ， 它 就 代表 了 最 前 下 


我 说 过 ， 这 不 简单 。 这 样 的 代码 你 可 不 想 写 多 次 。 而 使 用 Vizi 这 样 的 框架 ， 你 完全 不 需要 


自己 动手 。 


I 后 的 | 


页 序 返 回 任何 与 光线 相交 的 对 象 列表 。 














i 的 被 选中 的 对 象 。 











例 9-6: 使 用 THREE.Projector 实现 Vizi 选取 功能 


Vizi.GraphicsThreeJS.prototype.objectFromMouse = function(event) 


{ 


var eltx = event.elementX, elty = event.elementYy; 


// 将 客户 端 ( 视 口 ) 坐 标 转换 为 世界 坐标 


Var Vpx 
var vpy 





( eltx / this.container.offsetWidth )* 2 - 1; 
- ( elty / this.container.offsetHeight ) * 2 + 1; 


var vector = new THREE.Vector3( vpx, vpy, 0.5 ); 


this.projector .unprojectVector( vector, this.camera ); 


var pos = new THREE.Vector3; 
pos = pos.applyMatrix4(this.camera.matrixWorld); 


var raycaster = new THREE.Raycaster( pos, vector.sub( pos ) 


.Normalize() 


好 


var intersects = raycaster.intersectObjects( this.scene.children, 


true ); 


if ( intersects.length > 0 ){ 


var i = 0; 


while(!intersects[i].object.visible) 


{ 


i++; 
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漆 





} 


} 
var intersected = intersects[il]; 


if (i >= intersects.length) 


{ 
} 


return { object : null, point : null, normal : null }; 


return (this.findObjectFromIntersected(intersected.object, 
intersected.point, intersected.face.normal)); 


return { object : null, point : null, normal : null }; 


2. 添加 多 个 行为 


Vizi 允许 我 们 轻松 地 给 一 个 对 象 添加 多 个 行为 。 我 们 将 修改 前 理 











i 的 例子 ， 给 立方 体 添 





加 多 个 行为 。 当 鼠标 悬 停 的 时 候 ， 它 会 变 成 浅 蓝 色 来 高 亮 ， 如果 点 击 鼠 标 ， 它 会 开始 
旋转 、 跳 上 跳 下 、 慢 慢 远 离 镜头 ， 再 次 点 击 立方 体 它 会 停止 移动 。 打 开 文 件 Chapter 9/ 
vizicubebehaviors.html 来 查看 效果 。 相 关 代 码 在 例 9-7 中 ， 粗 体 标注 的 代码 行 显示 了 修改 
了 的 部 分 。 


例 9-7: 添加 多 个 行为 




















// 添加 一 个 复合 行为 

var rotator = new Vizi.RotateBehavior; 

var bouncer = new Vizi.BounceBehavior({loop:true}); 

var mover = new Vizi.MoveBehavior({loop:true, duration:2, 
moveVector :new THREE.Vector3(0, 0, -2)}); 

cube.addComponent(rotator); 

cube.addComponent(bouncer); 

cube.addComponent(mover ) ; 


// 使 立方 体 可 以 被 选中 
var picker = new Vizi.Picker; 
cube.addComponent(picker); 





// 添加 悬 停 高 亮 颜色 

var highlight = new Vizi.HighlightBehavior( 
{highlightColor :Ox88eeff}); 

cube.addComponent(highlight); 





// 将 选择 器 和 旋转 器 关联 起 来 。 鼠 标 悬 停 时 高 亮 ,点 击 时 切换 行为 
picker .addEventListener("mouseover", function() { 
highlight.on(); }); 
picker .addEventListener("mouseout", function() { 
highlight.off();}); 
picker .addEventListener("mouseup", function() { 
rotator .toggle(); 
bouncer .toggle(); 
mover .toggle(); }); 
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在 这 个 例子 中 添加 行为 就 像 添加 更 多 组 件 一 样 容 易 。 我 们 还 添加 了 鼠标 松 开 的 事件 监听 ， 
它 会 调用 每 个 行为 的 toggle() 方法 ， 来 在 点 击 鼠 标的 时 候 触 发 各 个 行为 的 开始 /停止 状 
态 。 图 9-5 显示 了 我 们 的 老 朋 友 ， 带 纹理 包 高 亮 、 旋 转 、 摆 动 、 远 离 ， 直 到 消 
失 在 远 处 。 





















































图 9-5: Vizi 的 带 纹理 立方 体 ， 具 有 行为 和 鼠标 交互 


这 些 简 单 的 例子 展示 了 Vizi 这 样 的 框架 能 做 什么 。 我 们 会 在 后 面 几 章 中 进一步 了 解 它 ， 还 
会 介绍 各 种 3D 应 用 的 方案 和 技术 。 


Vizi 还 在 开发 之 中 。 本 书 编写 的 时 候 ， 它 是 0.6 或 0.7 版 本 ， 有 很 多 功能 ， 
但 还 有 很 长 的 路 要 走 。 我 在 空 闪 或 有 机 会 开发 WebGL 项 目的 时 候 开 发 它 。 
当 这 本 书 付 印 的 时 候 ， 我 希望 已 经 发 布 1.0 版 本 了 。 
































9.4 小结 


本 章 介 绍 了 构建 3D 应 用 的 引擎 和 框架 。 尽 管 Three.js 很 强大 ,但 它 缺 乏 让 日 常 开发 变 得 
可 管理 的 功能 ， 比 如 高 层 的 行为 和 交互 、 预 制 的 启动 和 关闭 ， 以 及 许多 几乎 所 有 3D 应 用 
中 都 必须 完成 的 事情 。 


我 们 还 介绍 了 解决 这 些 问题 的 现 有 游戏 引擎 和 展示 框架 。WebGL 开发 这 一 领域 还 很 年 轻 ， 
在 不 断 地 发 展 ， 目 前 的 框架 也 是 如 此 。 有 很 多 可 选 的 框架 ， 需 要 作出 不 少 权衡 ， 包 括 控制 
权 、 功 能 、 易 用 性 ， 等 等 。 


最 后 ， 我 们 使 用 Vizi 来 深入 研究 了 基于 框架 的 开发 ， 它 是 我 开发 的 新 框架 ， 用 于 探索 框架 


渗 
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概念 ， 以 及 开发 本 书 的 例子 。 简 单 的 Vizi 例子 展示 了 使 用 框架 为 何 能 将 我 们 从 普遍 的 、 重 
复 的 开发 任务 中 解放 出 来 ， 帮 助 我 们 节省 时 间 ， 编 写 更 可 靠 的 代码 ， 并 专注 于 开发 本 身 。 
Vizi 只 是 框架 的 一 个 例子 ， 你 还 需要 探索 其 他 的 框架 ， 黄 至 是 设计 你 自己 的 框架 。 无 论 是 
选择 购买 还 是 自行 开发 ， 如 果 你 要 开发 产品 级 别 的 3D 应 用 ， 很 快 就 需要 解决 本 章 讨论 过 
的 那些 问题 。 
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开发 一 个 简单 的 3D 应 用 








目前 为 止 ， 我 们 关注 的 都 是 基础 : HTML5 基础 API 和 架构 、JavaScript 库 和 框架 ， 以 及 
内 容 制 作 流程 的 工具 。 现 在 是 时 候 实 践 这 些 知识 了 。 在 本 书 剩 下 的 部 分 ， 我 们 将 不 再 关注 
API 和 工具 ， 而 是 转向 开发 实际 应 用 的 具体 实践 。 

我 们 从 创建 一 个 简单 类 型 的 3D Web 应 用 开始 : 一 个 产品 的 查看 器 / 配置 器 。 这 样 的 应 用 
通常 会 是 一 个 真实 产品 的 交互 式 3D 模型 ， 有 丰富 的 界面 供 探索 产品 的 功能 ， 并 可 以 使 用 
鼠标 交互 来 查看 更 多 信息 ， 以 及 提供 某 些 方法 来 改变 模型 的 一 个 或 多 个 属性 。 基 于 Web 的 
产品 配置 工具 已 经 出 现 了 很 长 时 间 : 首先 是 静态 的 2D 模式 ， 然 后 是 使 用 Flash 的 2.5D 或 
3D 模式 ， 最 近 出 现 了 基于 Canvas API 或 WebGL 的 3D 模式 。 产 品 配置 器 既 可 以 是 高 功能 
营销 工具 〈 即 一 种 交互 性 更 强 的 ， 为 产品 功能 做 广告 的 方式 )， 也 可 以 集成 到 电子 商务 系 
统 中 ， 用 来 真实 地 在 线 配置 和 购买 产品 。 


图 10-1 展示 了 一 个 “未 来 车 ”的 概念 设计 。 可 以 打开 文件 Chapter 10/futurgo.html 来 体验 
它 。 用 鼠标 来 旋转 模型 ， 用 触摸 板 或 滚轮 来 放大 和 缩小 。 当 鼠标 悬 停 在 车 上 不 同 部 分 的 时 
候 ， 关 于 这 部 分 的 信息 就 在 一 个 浮 层 上 显示 出 来 。 点 击 右边 的 标签 来 显示 车 的 内 部 结 
及 转动 轮子 。 你 其 至 可 以 根据 你 的 个 人 喜好 来 改变 车 的 颜色 。“ 生 活 方 式 型 交通 工具 ” 
个 人 交通 工具 的 下 一 波浪 淹 。 由 小 摩托 车 、 高 尔 夫 球 车 、 智 能 车 的 各 一 部 分 ， 以 及 清江 的 
高 科技 组 合 而 成 ， 这 就 是 Futurgo ! 
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图 10-1: Futurgo 概念 车 一 一 一 个 3D 产品 页 面 


这 是 一 个 有 趣 的 、 完 全 人 造 的 产品 配置 器 例子 ， 它 涉及 了 部 署 一 个 3D 产品 页 面 所 需 的 关 
。 设计 应 用 
开发 3D 模型 及 2D 页 面 内 容 的 视觉 效果 ， 并 定义 用 户 交 互 流程 。 
。 创建 3D 内 容 
使 用 像 Autodesk Maya 这 样 的 工具 来 创建 模型 和 动画 ， 并 转换 为 适合 Web 的 格式 来 在 
应 用 中 使 用 。 
。 预览 和 测试 3D 内 容 
设计 一 系列 的 工具 来 验证 导出 的 3D 内 容 可 以 在 应 用 中 工作 (如 外 观 和 动画 正常 )。 
。 集成 3D 内 容 到 应 用 中 
将 3D 内 容 (一 旦 验证 它 的 外 观 和 动画 正常 ) 与 2D 页 面 内 容 以 及 其 他 应 用 代码 集成 。 
。 开发 3D 行为 和 交互 
通过 实现 一 些 行为 和 交互 来 让 3D 内 容 生 动 起 来 ， 包 括 一 个 视觉 淡出 效果 、 一 个 旋转 
台 、 鼠 标 移入 效果 、 用 户 交 互 触发 的 动画 ， 以 及 动态 修改 对 象 的 颜色 。 
上 述 所 有 需求 需要 通过 一 个 可 重复 的 流程 来 开发 。 当 我 们 排除 bug 和 改善 应 用 后 ， 应 该 达到 
可 以 随意 修改 修改 应 用 的 可 视 部 分 (尤其 是 3D 内 容 )， 而 不 需要 重新 编写 应 用 代码 的 状态 。 
为 了 构建 Futurgo 的 页 面 ， 我 们 需要 工具 来 支持 它 。 我 们 会 深入 学 习 第 9 章 介绍 过 的 Vizi 
框架 。Vizi 基于 Three.js 开发 ， 提 供 了 可 重用 的 行为 及 封装 好 的 对 象 ， 让 我 们 的 工作 变 得 
简单 ， 并 允许 我 们 用 更 少 的 代码 做 更 多 的 事情 。 我 们 还 会 使 用 开源 文件 导出 工具 和 转换 工 
具 ， 来 将 内 容 从 Maya 中 导出 成 适合 Web 的 格式 。 让 我 们 现在 就 开始 吧 。 
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10.1 设计 应 用 


我 和 3D 设计 师 TC Change 一 起 设计 了 Futurgo 应 用 。 我 和 TC 希望 将 Futurgo 设计 为 产品 可 
视 化 应 用 ， 它 同时 具备 可 玩 性 和 未 来 主义 风格 。Futurgo 概念 车 设计 融合 了 类 似 Segway 这 样 
的 个 人 交通 工具 的 特点 ， 同 时 还 具备 汽车 的 防护 性 ， 比 如 封闭 式 车 身 和 挡 风 玻 璃 。 我 们 不 知 
道 这 台 车 是 否 真 的 能 用 ， 更 别 说 合法 上 路 了 ， 但 我 们 觉得 将 这 些 概念 放 到 一 起 很 有 趣 。 

经 过 基本 的 概念 讨论 及 草图 设计 之 后 ，TC 开始 着 手 进行 完整 概念 的 视觉 处 理 。 原 型 如 图 
10-2 所 示 。 注 意 ， 原 型 和 最 终 产 品 非 常 接近 。 ' 我 们 可 以 重用 Photoshop 的 资源 ， 将 其 导出 
为 PNG 图片， 并 且 3D 泻 染 是 直接 从 Maya 得 到 的 ， 所 以 它 和 使 用 Three.js 实时 渲染 的 版 
本 非常 像 。 我 们 稍 后 会 看 到 ， 为 了 保证 导出 的 3D 内 容 忠 于 原先 的 浑 染 ， 我 们 还 需要 做 一 
些 额 外 的 工作 。 最 终结 果 显 示 这 是 值得 的 。 本 章 旨 在 教 你 如 何 达 到 这 样 的 视觉 保 真 度 并 且 
无 缝 地 将 艺术 和 代码 融合 起 来 ， 从 而 创建 精良 、 专 业 的 应 用 。 








ORDER TEST DRIVE FEATURES SPECS TOP 10 QUESTIONS CHARGING GALLERY VIDEO 


1 FDEDFGG 


Lifestyle Transportation Device 
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图 10-2， Futurgo 概念 车 的 设计 师 原 型 ， 由 TC Change (http:/Wwww.tcchang.com/) 设计 并 提供 图 片 














TC Change 是 资深 的 美术 总 监 ， 拥 有 做 人 的 简历 ， 包 括 长 期 在 迪士尼 互 
动 、 索 尼 、 艺 电 等 公司 工作 ， 参 与 过 诸多 打斗 游戏 的 开发 ， 如 《教父 》 
《和 镶 姆 斯 . 邦 德 》《 李 连 杰 》。TC 坚信 Web 3D 的 力量 ， 他 创建 了 该 领域 的 
一 个 早期 创业 公司 Flatland。 你 可 以 访问 http://www.tcchang.com/ 来 在 线 
查看 TC 的 工作 。 














注 1: 唯一 明显 的 视觉 差异 是 字体 ，TC 选择 了 一 种 叫 作 Mayraid Pro 的 字体 ， 但 它 不 是 Web 字体 。Google 
Fonts 的 PT Sans (http://www.google.com/fonts/specimen/PT+Scans) 是 一 个 不 错 的 替代 。 
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10.2 创建 3D 内 容 


TC 使 用 Autodesk Maya 2013 版 来 创建 Futurgo 模型 的 各 种 部 分 并 添加 动画 。 虽 然 Futurgo 
在 概念 上 是 一 个 物体 ， 但 它 实际 上 是 由 多 个 网 格 组 成 的 ， 每 个 代表 车 的 一 部 分 : 钢 质 车 
身 、 车 轮 、 车 内 座位 及 操控 、 车 窗 等 。 使 用 单独 的 各 个 部 分 来 创建 模型 是 很 重要 的 ， 这 样 
每 个 部 分 就 能 单独 进行 动画 ， 从 而 可 以 实现 应 用 中 的 不 同 交 互 ， 比 如 忌 标 慧 停 在 车 窗 或 车 
身 骨 架 上 来 获得 更 多 相关 信息 。 图 10-3 展示 了 在 Maya 中 对 Futurgo 进行 建 模 。 履 盖 在 上 
面 的 文本 显示 了 关于 模型 的 各 种 统计 信息 ， 包 括 顶点 和 三 角形 的 数量 。 




















图 10-3: 在 Autodesk Maya 中 对 Futurgo 进行 建 模 ; 图 片 由 TC Change 提供 (http://www .tcchang. 
com/) 


在 内 容 创建 这 一 阶段 ， 我 和 TC 仔细 规划 了 模型 的 各 个 方面 ， 如 比例 (Futurgo 模型 的 度量 
单位 ， 这 里 是 米 )、 设 置 光 源 的 方式 、 创 建 动画 的 方式 。Maya 在 动画 工具 方面 有 所 局 限 ， 

整个 文件 只 能 有 一 条 动画 时 间 线 ， 因 此 文件 中 的 所 有 动画 都 需要 相同 的 时 长 ， 不 然 短 的 间 
隔 就 会 出 现 空白 动画 。 我 们 决定 保持 动画 简短 ， 时 长 只 有 一 秒 ， 这 足够 将 车 窗 从 车 身上 分 
离 出 来 以 显示 内 饰 ， 也 足够 完成 一 个 轮子 的 全 程 旋转 了 。 


为 保证 性 能 ， 我 和 TC 还 控制 了 多 边 形 的 数量 。Futurgo 使 用 了 约 96 000 个 三 角形 ， 这 就 
保证 了 既 有 足够 的 三 角形 来 在 Three.js 中 泻 染 出 平滑 的 效果 ， 也 不 至 于 让 浏览 器 的 性 能 陷 
入 困境 。 这 样 做 的 另 一 个 目的 在 于 我 们 需要 通过 控制 多 边 形 的 数量 来 限制 文件 体积 。 对 于 
Web 应 用 来 说 ， 内 容 需 要 快速 下 载 。 最 终 我 们 从 Maya 转 成 gITF 的 部 署 文件 大 概 6 MB。 
这 看 起 来 还 是 有 点 大 ， 但 对 于 现代 用 户 的 网 络 来 说 ， 从 配置 了 服务 器 端 .bin 文件 压缩 的 服 
务 器 将 这 些 内 容 流 式 下 载 到 本 地 ， 速 度 还 是 非常 快 的 (只 需 几 秒 钟 )。 
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10.2.1 导出 Maya 场 景 到 COLLADA 


在 供 浏 览 器 展示 前 ，Maya 文件 需要 先 转 成 适合 WebGL 的 格式 。 我 们 决定 使 用 glTF 作为 
部 署 格 式 ， 因 为 它 体积 小 且 加 载 速度 非常 快 。 在 本 书 编写 的 时 候 ， 还 没有 直接 从 Maya 导 
出 为 glITF 的 方法 ， 因 此 我 们 使 用 Maya 支持 导出 的 格式 COLLADA， 然 后 再 转 成 gITF。， 


Maya 2013 的 COLLADA 导出 工具 有 很 多 问题 而 且 过 时 了 ， 所 以 我 们 选择 使 用 
OpenCOLLADA (http://opencollada.org/) ， 一 个 高 性 能 的 开源 导出 工具 ， 由 独立 开发 者 开 
发 ， 可 以 创建 高 质量 、 兼 容 规范 的 COLLADA 输出 。 本 书 编写 的 时 候 ，OpenCOLLADA 
的 Maya 版 本 (还 有 3ds Max 版 本 ) 工作 良好 ， 我 们 可 以 成 功 使 用 它 将 Futurgo 导出 为 
COLLADA 格式 。OpenCOLLADA 的 主 站 包含 Maya 插件 及 3ds Max 从 2010 到 2013 版 本 
插件 的 下 载 (Autodesk 倾向 于 每 年 更 新 它 的 插件 SDK， 因 此 导出 工具 需要 跟 上 ， 以 保证 导 
出 工具 的 版 本 匹配 产品 版 本 )。 导 出 工具 安装 好 后 ， 需 要 保证 它 在 Maya 中 处 在 启用 状态 ， 
具体 配置 在 插件 管理 器 中 (窗口 一 设置 /首选 项 一 插件 管理 器 )， 如 图 10-4 所 示 。 

















Biee 
Filter Help 


Y /Users1/Shared/Autodesk1/maya/12013/plugzj 
COLLADAMaya.bundle w Loaded v Auto load i 
v JUsers/Shared/Autodesk/maya/plug-ins 


v /Applications/Autodesk/maya2013/Maya.app/Contents/MacOS/plug-ins 


Plug-in Manager 





2 


AbcExport.bundle w Loaded Auto load 
Abcimport.bundle w Loaded v Auto load 
ETD Loaded Auto load 
atomimportExporLbundle Loaded Auto load 
AutodeskPacketFile.bundle v Loaded Auto load 
bullet.bundle Loaded Auto load 
cgfxShader.bundle Loaded Auto load 
cleanPerFaceAssignment.bundle Loaded Auto load 
clearcoat.bundle Loaded Auto load 
ddsFloatReader.bundle Loaded Auto load 
dgProfiler.bundle Loaded Auto load 
DirectConnect.bundle v Loaded Vv Auto load 


Browse Refresh Close 











图 10-4: 在 Autodesk Maya 2013 插件 管理 器 中 启用 OpenCOLLADA 导出 


Futurgo 导出 的 COLLADA 文件 和 示例 代码 在 一 起 ， 文 件 是 models/futurgo/futurgo.dae。 





OpenCOLLADA 是 一 个 开源 项 目 ， 它 的 更 新 和 维护 有 点 类 似 于 义务 劳动 的 
性 质 ， 所 以 使 用 的 时 候 需 要 注意 。 在 这 里 ， 我 们 并 不 能 保证 它 会 一 直 维 护 下 
去 ， 尤 其 是 在 Autodesk 后 续 版 本 中 更 新 SDK 的 时 候 。 不 过 COLLADA 只 是 导 
出 Maya 和 3ds Max 文件 的 一 种 方法 ， 另 外 一 种 有 可 能 的 方法 是 将 FBX 转 成 
gITF。Autodesk 的 工具 在 今后 一 段 时 间 能 保证 输出 FBX 格式 。 一 些 公司 ， 比 
如 第 8 章 介 绍 的 Verold (http:Wwww.verold.com/) ， 正 在 尝试 将 FBX 转 成 glTF。 























注 1:; glTF, 用 于 WebGL 的 图 形 库 传输 格式 ; COLLADA, 基于 XML 的 图 形 交 换 格式 。 有 具体 内 容 参 见 第 8 
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10.2.2 ”将 COLLADA 文 件 转换 gITF 格 式 

当 Futurgo 模型 从 Maya 导出 为 COLLADA 后 ， 它 就 可 以 被 转 成 glTF 格式 了 。COLLADA 
工作 组 的 主席 及 glTF 的 主 设计 师 Fabrice Robinet 写 了 一 个 命令 行 工具 来 进行 这 个 工作 。 
在 我 的 MacBook Air 运行 的 Mac OS 10.8 上 ， 执 行 命令 的 是 一 个 叫 collada2gltf 的 可 执行 文 
件 。 要 转换 Futurgo， 我 运行 如 下 命令 ， 程 序 的 输出 使 用 斜体 表示 。 


$ <path-to-converter>/collada2gltf -f futurgo.dae -d 





[option] export pass details 
converting:futurgo.dae ... as futurgo.json 
[shader]: futurgoOVvs.glsl 

[shader]: futurgoOFSs.glsl 

[shader]: futurgo2VS.glsl 

[shader]: futurgo2FS.glsl 

[shader]: futurgo4VSs.glsl 

[shader]: futurgo4FS.glsl 

[completed conversion] 


转换 后 ， 你 会 在 你 的 目录 下 看 到 futurgo.json 文件 ， 以 及 相应 的 GLSL 着 色 器 源 文件 (后 级 
是 .glsl)。 现 在 文件 被 转 成 了 glTF 格式 ， 可 以 使 用 我 为 Three.js 编写 的 gITF 加 载 器 来 将 其 
加 载 到 应 用 中 。 我 们 会 在 下 个 小 节 介 绍 如 何 做 到 这 一 点 。Futurgo 转换 后 的 glTF 文件 与 示 
例 代 码 打 包 在 了 一 起 ，models/futurgo/futurgo.json 是 主 JSON 文件 ，models/futurgo/futurgo. 
bin 是 它 关 联 的 二 进 制 文件 。 
本 书 编写 的 时 候 ，glTF 还 处 在 发 展 的 早期 阶段 。 这 句 话 有 两 层 意 思 。 首 
先 ， 规 范本 身 还 在 变化 ， 因 此 本 书 所 带 的 文件 有 可 能 在 规范 明确 的 时 候 过 
时 了 ， 所 以 你 需要 准备 更 新 或 迁移 你 的 内 容 。 其 次 ， 这 个 工具 还 很 年 轻 ， 
比如 collada2gltf 转换 工具 必须 在 目标 平台 上 从 代码 进行 编译 。 更 多 关于 
转换 工具 的 信息 ， 可 以 访问 glTF 在 GitHub 上 的 项 目 (https://github.com/ 
KhronosGroup/glTF) 或 gITF 主页 (http://gltf.gl/)。 


















































10.3 预览 和 测试 3D 内 容 


现在 我 们 已 经 将 内 容 从 Maya 中 导出 了 ， 接 下 来 我 们 要 解决 下 一 个 问题 : 如 何 让 它 在 页 面 
上 显示 出 来 。glTF 文件 并 不 能 直接 查看 回想 一 下 ，WebGL 并 不 能 直接 识别 任何 格式 。 
我 们 需要 使 用 我 们 自己 的 库 来 加 载 模型 和 场景 。 在 构建 应 用 前 ， 最 好 能 先 保证 3D 内 容 是 
良好 的 ， 也 就 是 说 ， 我 们 可 以 完整 地 在 WebGL 中 渲染 全部 场景 信息 ， 比 如 材质 、 纹 理 、 
光源 、 相 机 、 变 换 、 动 画 。 为 此 ， 我 们 需要 创建 一 个 工具 来 帮助 我 们 预览 和 测试 我 们 的 
3D 内 容 。 


10.3.1 基于 Vizi 的 预览 工具 


我 们 使 用 Vizi 来 创建 3D 预览 工具 。 我 们 在 第 9 章 介绍 过 Vizi， 它 是 我 开发 的 
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使 用 基于 组 件 的 方式 来 构建 3D 应 用 ， 它 可 以 自动 完成 类 似 初 始 化 和 清空 画布 这 样 的 重复 
性 工作 ， 并 提供 了 应 用 程序 的 运行 循环 和 事件 处 理 机 制 ， 以 及 一 系列 预 建 的 行为 和 交互 。 
虽说 图 形 仍 然 使 用 的 是 Three.js 这 个 WebGL 事实 上 的 标准 库 ， 但 Vizi 将 它 封 装 得 更 加 可 
重用 和 可 快速 编码 。 


图 10-5 展示 了 预览 工具 载 入 Futurgo 的 glTF 文件 到 场景 中 的 效果 。 预 览 工具 有 一 个 主 内 
容 区 域 用 于 查看 模型 和 场景 ， 并 带 有 网 格 地 板 。 有 一 个 菜单 栏 ， 其 中 包含 一 个 Open 按钮， 
以 及 显示 当前 浏览 文件 的 标签 。 右 侧 是 一 个 控制 面板 ， 带 有 几 个 子 面板 。 场 景 状态 (Scene 
Stats) 面板 显示 了 当前 的 帧 率 、 网 格 和 多 边 形 的 数量 ， 以 及 加 载 场景 所 花费 的 时 间 。 相 机 
(Cameras)、 光 源 (Lights) 和 动画 (Animations) 面板 允许 用 户 测 试 这 些 场景 部 件 ， 可 以 
切换 相机 、 打 开 和 关闭 光源 、 运 行动 画 。 还 有 一 个 其 他 参数 (Miscellaneous) 面板 允许 我 
们 打开 和 关闭 前 光源 ( 它 是 一 个 额外 的 光源 ， 用 于 在 模型 没有 光源 的 时 候 使 用 )， 还 有 一 
个 复 选 框 来 显示 和 隐藏 网 格 。 





















































图 10-5: 使 用 Vizi 预览 一 个 glTF 模型 


除了 让 我 们 可 视 化 地 查看 和 测试 内 容 ， 预 览 器 还 提供 了 关于 场景 的 重要 信息 ， 即 在 应 用 中 
连接 交互 所 使 用 对 象 的 id。TC 在 上 传导 出 的 COLLADA 文件 后 ， 发 邮件 告诉 了 我 动画 的 
名 称 ， 但 那 并 不 是 一 个 确定 在 代码 中 所 使 用 的 对 象 id 的 可 靠 方 法 。 使 用 预览 工具 ， 我 们 可 
以 确定 在 COLLADA 和 转换 后 的 gITF 文件 中 ， 动 画 所 使 用 的 对 象 的 id 〈 它 就 是 在 右边 控 
制 面板 中 的 动画 面板 内 所 显示 的 名 称 ) 。 

本 章 中 展示 的 预览 器 是 一 个 简单 的 独立 工具 。 虽 然 它 不 是 一 个 完整 的 开发 环境 ， 但 它 为 整 
个 开发 流程 提供 了 在 将 内 容 添加 到 应 用 中 之 前 必要 的 验证 和 测试 环节 。 我 们 将 在 后 续 的 项 
目 开发 中 使 用 这 样 的 预览 器 。 现 在 先 让 我 们 看 看 它 是 如 何 创 建 的 。 
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10.3.2 ”Vizi 查 看 器 类 


许多 3D 应 用 都 遵循 同一 个 模式 ， 初始 化 泻 染 器 ， 创 建 一 个 空 的 场景 ， 加 载 一 些 模型 内 容 ， 
添加 交互 ， 运 行 它 。 这 个 模式 非常 常见 ， 因 此 我 设置 了 一 个 可 重用 的 Vizi 类 来 实现 它 。 
Vizi.Viewer 是 Vizi.Application 的 子 类 ， 它 是 一 个 专门 用 于 查看 模型 和 场景 并 与 之 交互 
的 应 用 。 你 可 以 使 用 它 来 支持 用 鼠标 旋转 模型 及 场景 ， 将 模型 及 场景 绘制 在 左边 、 右 边 、 











' 护 而 


i 及 下 面 ， 以 及 对 它们 进行 缩放 。 











Vizi.Viewer 可 以 用 在 许多 类 型 的 浏览 场景 : 一 个 简单 的 查看 器 ， 载 入 模型 并 允许 用 户 查 
看 和 旋转 它 ， 没 有 别 的 附加 修饰 物 ， 一 个 本 市 会 介绍 的 预览 器 ， 其 至 是 一 个 完整 的 产品 可 
视 化 页 面 ， 比 如 Futurgo (我 们 会 在 本 章 后 面 看 到 它 是 如 何 做 到 的 )。 


Vizi.Viewer 是 一 个 真正 的 框架 样式 的 类 ， 它 在 一 个 类 中 包含 了 许多 开 箱 即 用 的 功能 ， 而 
自行 去 实现 这 些 功能 往往 需要 数 百 行 Three.js 代码 。Vizi.Viewer 的 功能 如 下 。 



































模型 查看 控制 

Vizi.Viewer 使 用 了 一 个 来 自 Three.js 例子 的 增强 版 本 的 THREE.OrbitControLs。 鼠 标 左 
键 旋 转 场景 ， 鼠 标 右键 平移 场景 ， 鼠 标 滚轮 和 触摸 板 缩放 场景 。 它 还 可 以 覆盖 和 重新 映 
射 鼠 标 绑 定 。 

默认 相机 和 光照 

对 于 未 包含 相机 的 场景 ，Vizi.Viewer 提供 了 一 个 默认 的 相机 。 对 于 没有 光照 的 场景 ， 它 
可 以 视 需 要 创建 一 个 前 置 光源 来 自动 照 亮 模型 ， 并 且 在 用 户 移动 相机 的 时 候 更 新 光源 。 











场景 工具 对 象 
如 果 需 要 ，Vizi.viewer 可 以 显示 一 个 和 矩形 网 格 的 地 面 ， 还 可 以 在 模型 周围 显示 边界 框 。 
场景 和 洽 染 统计 


Vizi.Viewer 对 象 可 以 通过 发 布 事件 来 报告 帧 率 、 场 景 统计 (如 网 格 和 多 边 形 数量 )、 边 
界 框 尺寸 ， 以 及 文件 加 载 时 间 。 

光源 、 相 机 和 动画 控制 

Vizi.Viewer 提供 了 辅助 方法 来 允许 程序 员 打 开 和 关闭 光源 、 切 换 相 机 、 开 始 和 停止 动 
画 。 它 还 为 应 用 提供 了 每 个 类 型 的 对 象 的 列表 ， 因 此 不 需要 在 代码 中 查找 它们 。 

一 键 操作 

THREE.OrbitControls 对 象 被 修改 为 支持 一 键 操 作 ， 因 此 为 了 可 用 性 ， 鼠 标 右键 会 被 禁 
用 或 映射 为 鼠标 左 键 。 








六 


为 了 查看 Vizi.Viewer 的 实际 效果 ， 让 我 们 看 看 它 是 如 何 用 来 实现 预览 工具 的 。 打 开 文 
件 Chapter 10/previewer.html 来 查看 图 10-5 所 示 的 预览 器 效果 。 例 10-1 展示 了 创建 Vizi 
Viewer 对 象 的 部 分 源 代码 。 和 之 前 一 样 ， 我 们 传递 一 个 container 参数 ， 它 是 一 个 DIV 元 


素 ， 

















Three.js 会 将 它 的 WebGL 泻 染 器 〈 也 就 是 一 个 带 WebGL 绘图 上 下 文 的 Canvas) 添加 





到 上 面 。 我 们 还 增加 了 一 些 选 项 ， 来 告诉 查看 器 显示 网 格 、 使 用 一 个 前 置 光 源 〈 这 样 如 果 
场景 中 设 有 光源 我 们 也 可 以 看 到 模型 )。 创 建 好 查看 器 对 象 后 ， 我 们 添加 几 个 事件 监听 器 ， 
来 检测 帧 率 及 其 他 场景 状态 的 变化 。 我 们 稍 后 会 研究 这 些 事件 处 理 函 数 。 接 下 来 我 们 为 染 
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单 栏 的 Open 按钮 构建 了 一 个 文件 列表 。 最 后 我 们 调用 查看 器 的 运行 循环 来 运行 应 用 。 
例 10-1: 创建 Vizi 查看 器 对 象 


var viewer = null; 
$(document).ready(function() { 


var container = document.getElementById("container"); 
var renderStats = document.getElementById("render_stats"); 
var sceneStats = document.getElementById("scene_stats"); 


Viewer = new Vizi.Viewer({ container : container, 
showGrid : true, headlight : true, 
showBoundingBox : false }); 
viewer .addEventListener("renderstats", function(stats) { 
onRenderStats(stats, renderStats); }); 
viewer .addEventListener("scenestats", function(stats) { 
onSceneStats(stats, sceneStats); }); 


buildFileList(); 


viewer .run(); 
} 
2 
打开 预览 工具 ， 你 会 看 到 一 个 空白 的 场景 窗口 。 顶 部 检 黄 色 的 菜单 栏 提 供 一 个 用 户 界面 来 
打开 文件 列表 中 的 一 个 3D 文件 。 








10.3.3 ”Vizi 加 载 类 

点 击 顶 部 的 Open 按钮 会 打开 一 个 文件 菜单 ， 我 们 可 以 选择 文件 。 选 择 ../models/futurgo/ 
futurgo.json 文件 。 你 会 看 到 Futurgo 显示 在 场景 窗口 中 ， 如 图 10-5 所 示 。 你 可 以 随意 使 用 
鼠标 、 触 摸 板 或 滚轮 来 对 其 进行 交互 。 

预览 工具 使 用 另 一 个 Vizi 类 一 一 Vizi.Loader ， 来 将 模型 加 载 到 Vizi 查看 器 对 象 中 ， 请 看 
例 10-2。 

例 10-2: 使 用 Vizi.Loader 对 象 来 加 载 文 件 


function openFile() 


{ 


























var select = document.getElementById("files"); 
var index = select.selectedIndex; 

if (index >= 0) 

{ 


var url = select.options[index].text; 

var loader = new Vizi.Loader; 

loader .addEventListener("loaded", function(data) { 
onLoadComplete(data, loadStartTime); }); 

loader .addEventListener("progress", function(progress) { 


onLoadProgress(progress); }); 


var fileViewingName = document.getElementById("fileViewingName"); 
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fileViewingName.innerHTML=url; 


var loadStartTime = Date.now(); 
loader .loadScene(url); 


var LoadStatus = document.getElementById("loadStatus"); 
LoadStatus.style.display = 'block'; 
} 


$('#fileOpenDialog').dialog("close"); 
} 


Vizi.Loader 使 用 Threejs 的 JSON、COLLADA 或 glTF 加 载 器 来 解析 各 种 格式 ， 并 将 它 
们 加 载 到 内 存 中 。 并 且 ， 它 还 在 Vizi 组件 中 封装 了 新 创建 的 Threejs 场景 ， 使 得 场景 适 
合 在 基于 Vizi 的 应 用 中 使 用 。 最 后 ， 它 在 文件 下 载 和 解析 的 时 候 对 监听 器 发 送 Loaded 和 
progress 事件 。 例 10-3 展示 了 事件 监听 函数 onLoadComptLete() ， 它 用 来 检测 文件 何 时 加 载 
完成 并 准备 好 添加 到 查看 器 中 。 

例 10-3: 预览 工具 的 文件 加 载 事 件 监听 函数 


function onLoadComplete(data, loadStartTime) 


























// 隐藏 加 载 状态 栏 
var LoadStatus = document .getELementById("LoadStatus'" ) ; 
loadStatus.style.display = 'none'; 
viewer .replaceScene(data); 
var loadTime = (Date.now() - loadStartTime) / 1000; 
var loadTimeStats = document.getElementById("load_ time_stats"); 
loadTimeStats.innerHTML = "Load time: ”+ 
loadTime.toFixed(2) + " seconds." 
updateCamerasList(viewer); 
updateLightsList(viewer); 
updateAnimationsList(viewer); 
updateMiscControls(viewer); 
if (viewer.cameraNames.length > 1) { 
selectCamera(1); 
} 
} 


这 个 监听 国 数 做 了 几 件 事情 。 首 先 ， 它 隐藏 了 用 于 显示 “Loading scene...” 信 息 的 DIV 元 
素 ， 从 而 告诉 用 户 加 载 已 经 完成 了 。 接 下 来 ， 它 调用 查看 器 的 replaceScene() 方法 来 将 
新 加 载 好 的 内 容 添加 到 查看 器 中 ， 以 允许 我 们 在 场景 窗口 中 查看 和 操作 Futurgo。 然 后 
这 个 监听 国 数 更 新 场景 状态 面板 中 的 加 载 时 间 。 接 下 来 ， 基 于 查看 器 中 被 操作 对 象 的 数 
组 ， 它 调用 几 个 辅助 函数 来 更 新 用 户 界 面 中 的 列表 (例如 相机 和 光源 )。 最 后 ， 它 调用 
函数 selectCamera() 来 选择 场景 中 的 第 一 个 相机 (不 包含 默认 那个 )， 如 果 它 存在 的 话 。 
selectCamera() 使 用 查看 器 的 useCamera() 方法 来 切换 相机 : 












































function selectCamera(index) 
{ 
var select = document.getElementById("cameras_list"); 
if (index === undefined) { 
index = select.selectedIndex; 


} 
else { 

select.selectedIndex = index; 
} 


if (index >= 0) { 
viewer .useCamera(index); 


} 


现在 ,我们 可 以 使 用 预览 工具 来 检查 和 测试 模型 了 。 使 用 鼠标 左 键 旋转 模型 ， 鼠标 右键 平 
移 模 型 ， 鼠标 深 轮 或 触摸 板 缩 放 模 型 。 试 试 右边 的 各 种 控制 来 切换 相机 、 打 开 和 关闭 灯 
光 ， 以 及 播放 动画 。 
能 测试 动画 是 预览 工具 一 个 很 重要 的 功能 。3D 动画 很 容易 出 错 ， 在 制作 过 程 中 会 有 各 种 
可 能 的 问题 出 现 。 在 预览 工具 中 测试 动画 可 以 节省 后 续 解决 故障 所 花费 的 时 间 。 图 10-6 
展示 了 我 们 播放 动画 animation_window_front_open 和 animation_window_rear_open 的 效 
果 。 可 以 看 到 我 们 得 到 了 想 要 的 效果 : 前 面 和 后 面 的 车 窗 弹 开 了 ， 所 以 我 们 可 以 看 到 模 
型 的 内 饰 。 


























图 10-6: 在 预 贞 工具 中 播放 动画 


注意 动画 并 不 是 Vizi 场景 图 (或 者 说 Threejs 场景 图 ) 的 一 部 分 。 它 们 在 查看 器 中 保 
存在 一 个 独立 的 对 象 数 组 中 。 因 此 我 们 需要 使 用 查看 器 的 工具 方法 来 播放 、 停 止 和 循 
环 动画 。 例 10-4 展示 了 HTML 中 的 相关 函数 ， 它 们 调用 查看 器 的 不 同方 法 来 播放 、 停 
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止 和 循环 动画 ， 包括 viewer.pLayAnimation()、viewer.stopAnimatiton()、viewer . 
playAllAnimations()、viewer.stopAllAnimations() 和 viewer.setLoopAnitmatitons() 。 


例 10-4: 使 用 Vizi 查看 器 的 方法 来 控制 动画 播放 


function selectAnimation() 


{ 
var select = document.getElementById("animations_list"); 
var index = select.selectedIndex; 
if (index >= 0) 
{ 
viewer .playAnimation(index, viewer .loopAnimations); 
} 
} 
function playAnimation() 
{ 
var select = document.getElementById("animations_list"); 
var index = select.selectedIndex; 
if (index >= 0) 
{ 
viewer .playAnimation(index, viewer .loopAnimations); 
} 
} 
function stopAnimation() 
由 
var select = document.getElementById("animations_list"); 
var index = select.selectedIndex; 
if (index >= 0) 
下 
viewer .stopAnimation(index); 
} 
} 
function playAllAnimations() 
{ 
viewer .playAllAnimations(viewer .loopAnimations); 
} 
function stopAllAnimations() 
{ 
viewer .stopAllAnimations(); 
} 
function onLoopChecked(elt) 
{ 
viewer .setLoopAnimations(elt.checked); 
} 


10.4 将 3D 集 成 到 应 用 中 


现在 我 们 确信 我 们 的 3D 内 容 会 正常 加 载 、 演 染 和 动画 ， 可 以 开始 构建 应 用 了 。 第 一 步 是 
将 3D 集成 到 应 用 的 Web 页 面 中 。 再 次 打开 文件 Chapter 10/futurgo.html 来 查看 页 面 ， 如 医 
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10-7 所 示 。 
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图 10-7: 集成 Futurgo 模型 到 HTML 页 面 中 


注意 页 面 中 的 所 有 元 素 是 如 何平 滑 整合 的 ， 这 都 拜 浏览 器 合成 引擎 的 强大 能 力 所 赐 。 每 
个 页 面 元 素 是 一 个 简单 的 DIV 或 几 个 嵌 套 的 DIV， 有 适当 的 顺序 和 >-index 设置 。3D 视 
图 显示 在 页 面 其 他 元 素 的 下 层 ， 所 以 界面 看 起 来 在 上 面 。 有 些 用 户 界面 元 素 是 透明 的 ， 这 
允许 更 多 的 3D 场景 显示 出 来 。 如 果 你 看 到 的 图 片 是 彩色 的 ， 请 注意 3D 场景 背景 所 使 用 
的 紫色 和 灰色 渐变 ， 这 直接 源 自 TC 的 设计 。 我 们 简单 地 设置 容器 元 素 的 CSS background 
属性 ， 它 就 可 以 用 于 WebGL canvas 的 背景 。 这 是 非常 强大 的 能 力 。 最 后 ， 我 们 决定 保留 
Vizi.Viewer 所 提供 的 灰色 相框 。( 我 承认 这 最 开始 是 复制 粘贴 的 意外 ， 但 我 们 喜欢 这 个 效 
果 所 以 决定 保留 它 。) 

应 用 的 源码 在 Chapter 10/futurgo.html、css/futurgo.css 和 Chapter 10/futurgo.js 中 。 相 比 之 
前 的 预览 右 ， 我 们 重 构 了 一 些 代码 。HTML 关注 的 只 是 标签 ， 主要 是 DIV， 以 及 少量 的 脚 
本 : 页 面 加 载 代 码 、 基 停 后 的 处 理 程 序 、 右 边 的 界面 标签 。 


页 面 加 载 代码 如 例 10-5 所 示 ， 它 创建 了 一 个 新 的 Futurgo 对 象 ， 向 它 传递 了 一 个 容器 元 
素 、 一 些 加 载 完成 及 鼠标 悬 停 和 移出 的 回调 函数 。 然 后 它 调用 Futurgo.go()， 这 会 加 载 3D 
场景 ， 并 启动 运行 循环 。 

例 10-5: Futurgo 页 面 加 载 代码 











<script> 
var futurgo = null; 
var overlay = null; 


var overlayContents = null; 
var LoadStatus = null; 
var part materials = []; 
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$(document).ready(function() { 


initControls(); 
overlay = document.getElementById("overlay"); 
overlayContents = document.getElementById("overlayContents"); 
loadStatus = document.getElementById("loadStatus"); 
var container = document.getElementById("container"); 
futurgo = new Futurgo({ container : container, 
LoadCaLLback : onLoadComplete, 
ToadProgressCallback : onLoadProgress, 
mouse0verCaLLback : onMouseOver, 
mouseOQutCallback : onMouseOut, 


]); 
loadStatus.style.display = "blLock ' ; 
futurgo.go(); 
} 
); 























Futurgo 对 象 处 理 了 大 部 分 厂 烦 的 加 载 细 节 ， 页 面 代 码 中 的 加 载 回调 只 需要 隐藏 
“Loading Scene.” 的 DIV， 具体 代码 请 查看 例 10-6。 鼠 标的 回调 函数 onMouse0ver() 和 
onMouse0ut() 会 在 下 一 节 介 绍 。 


例 10-6: 隐藏 页 面 加 载 进 程 信息 
function onLoadComplete(loadTime) 


{ 





// 隐藏 加 载 状态 栏 
loadStatus.style.display = 'none'; 


} 


现在 让 我 们 来 看 看 Futurgo 类 如 何 初 始 化 查看 器 和 加 载 场 景 ， 代 码 如 例 10-7 所 示 (源码 文 
件 是 Chapter 10/futurgo.js)。 


例 10-7: Futurgo 应 用 的 查看 器 设置 和 文件 加 载 代 码 


Futurgo = function(param) { 


this.container = param.container; 

this.loadCallback = param.LoadCaLLback; 
this.loadProgressCallback = param.loadProgressCallback; 
this.mouseOverCallback = param.mouseOverCallback; 
this.mouseOutCallback = param.mouseOutCallback; 
this.part materials = []; 

this.vehicleOpen = false; 

this.wheelsMoving = false; 


} 


Futurgo.prototype.go = function() { 
this.viewer = new Vizi.Viewer({ container : this.container, 
showGrid : true, 
allowPan: false, oneButton: true }); 
this .loadURL(Futurgo.URL); 
this .viewer .run(); 





Futurgo.prototype.LoadURL = function(url) { 
var that = this; 


var Loader = new Vizi.Loader; 

loader .addEventListener("loaded", function(data) { 
that.onLoadComplete(data, loadStartTime); }); 

loader .addEventListener("progress", function(progress) { 
that.onLoadProgress(progress); }); 


var loadStartTime = Date.now(); 
loader .loadScene(url); 


} 


到 目前 为 止 ， 这 些 代码 大 部 分 看 起 来 应 该 都 很 熟悉 。 就 像 我 们 为 预览 工具 所 做 的 那样 ， 我 
们 创建 了 Vizi.Viewer 和 Vizi.Loader 对 象 。 当 然 ， 我 们 在 创建 查看 器 的 时 候 设 置 了 一 些 
不 同 的 参数 (在 代码 中 以 粗 体 标注 )。altlowPan 控制 了 用 户 是 否 可 以 使 用 鼠标 右键 来 上 下 
左右 移动 物体 。 我 们 将 它 设置 为 false， 因 为 我 们 希望 物体 始终 在 场景 的 中 间 。oneButton 
控制 了 是 否 鼠 标 右 键 也 可 以 用 来 旋转 模型 。 将 它 设置 为 true， 我 们 就 可 以 使 用 鼠标 左 键 或 
右键 来 进行 旋转 。 

前 面 的 代码 将 Futurgo 模型 加 载 到 了 页 面 中 ， 看 起 来 不 错 且 可 以 进行 交互 了 。 接 下 来 的 一 
市 我 们 会 看 看 如 何 通 过 3D 行为 和 交互 来 让 它 生动 起 来 。 


10.5 “开发 3D 行 为 和 交互 


到 目前 为 止 我 们 创建 的 Futurgo 应 用 已 经 非常 有 趣 了 。 我 们 可 以 实时 查看 3D 模型 ， 还 有 
良好 的 集成 视觉 效果 ， 其 至 可 以 使 用 鼠标 控制 模型 。 但 它 可 以 更 完美 ， 我 们 可 以 通过 添加 
3D 行为 和 交互 来 让 它 成 为 一 个 充分 利用 了 Web 实时 图 形 能 力 的 真正 的 交互 应 用 。 这 包括 
使 用 透明 渐变 和 一 个 旋转 木马 风格 的 旋转 来 自动 动画 模型 加 载 ， 实 现 鼠 标 基 停 时 显示 产品 
功能 的 更 多 信息 ， 以 及 通过 点 击 页 面 中 的 2D 元 素 动 态 改变 3D 物体 。 


10.5.1 Vizi 场 景 图 API 方 法 : findNode() 和 map() 


本 节 介 绍 的 行为 需要 遍历 Vizi.Loader 加 载 的 3D 内 容 场景 图 ， 所 以 我 们 可 以 给 某 些 对 象 
添加 行为 或 鼠标 交互 。 有 时 候 我 们 需要 通过 名 称 或 id 来 查找 对 象 ， 有 时 候 我 们 需要 遍历 场 
景 图 或 其 中 一 部 分 来 查找 某 一 类 型 的 对 象 。Vizi 提供 了 一 系列 场景 图 API 来 做 这 些 事 情 。 
可 以 向 这 些 方法 传递 一 个 字符 串 标识 符 、 一 个 JavaScript 正则 表达 式 ， 或 者 一 个 JavaScript 
对 象 类 型 (使 用 instanceof 操作 符 来 进行 比较 )。findNode() 和 findNodes() 方法 返回 所 
匹配 的 对 象 ，map() 方法 查找 对 象 并 在 结果 上 调用 一 个 函数 。 
。 findNode(query) 
这 个 方法 通过 query 查找 一 个 节点 (Vizi.0bject 或 Vizi.Component 的 实例 )。query 可 
以 是 一 个 字符 串 标识 符 〈 例 如 “body2”) 、 一 个 对 象 类 型 (例如 Vizit.Visuat) ， 或 者 一 
个 正则 表达 式 (如 /windows_front|windows_rear/)。 如 果 在 Vizi 场景 图 中 有 多 个 这 样 
的 节点 ， 则 返回 第 一 个 。 
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。 findNodes(query) 
这 个 方 通过 query ey (Vizi.0bject 或 Vizi.Component 的 实例 )。query 可 以 
是 一 个 字符 串 标识 符 (例如 “body2”)、 一 个 对 象 类 型 (例如 Vizi.Visual), 或 者 一 个 
正则 表达 式 a 


。 map(query, callback_function) 
这 个 方法 使 用 findNodes() 来 查找 匹配 搜索 query 的 所 有 节点 ， 然 后 在 每 个 节点 上 调用 
回调 函数 。 
你 可 以 把 Vizi 场景 图 API 方 法 当成 类 似 jQuery 查询 的 功能 ， 尽 oe 


了 完全 不 同 的 query 方案 。Vizi 使 用 的 是 字符 串 和 JavaScript eh 
不 是 选择 符 。 这 是 有 意 的 设计 ， 基 于 Vizi 架构 的 对 象 及 组 件 性 质 。 

















现在 ， 让 我 们 浏览 一 下 Futurgo 加 载 处 理 代 码 ， 来 查看 它 如 何 添 加 行为 ， 如 例 10-8 中 
所 示 。 


首先 ，onLoadComplete() 调用 this.viewer.repLaceScene(data) 来 将 加 载 好 的 ee 
添加 到 查看 器 中 。 在 它 的 内 部 实现 中 ， 查 看 器 不 仅仅 是 将 对 和 象 添 加 到 它 的 场景 图 里 ， 
考虑 了 光源 、 相 机 及 动画 (前 面 介绍 过 )， 因 此 我 们 可 以 进行 切换 相机 、 播放 动画 等 操作 。 
然后 ， 这 个 函数 开始 添加 行为 ， 其 至 会 启动 其 中 的 一 些 。 这 些 行为 的 设置 将 在 接 下 来 的 一 
节 中 逐一 进行 介绍 。 


例 10-8: 在 场景 加 载 后 添加 行为 到 Futurgo 应 用 中 


Futurgo.prototype.onLoadComplete = function(data, loadStartTime) 








var scene = data.scene; 
this.viewer.replaceScene(data); 


// 为 车 窗 添 加 进入 时 淡出 的 行为 ,并 为 鼠标 经 过 行为 添加 选择 器 
var that = this; 
scene.map(/windows_front|windows_rear/, function(o) { 
var fader = new Vizi.FadeBehavior({duration:2, opacity: .8}); 
0.addComponent(fader); 
setTimeout(function() { 
fader .start(); 
}, 2000); 





var picker = new Vizi .Picker; 

picker .addEventListener("mouseover", function(event) { 
that.onMouseOver("glass", event); }); 

picker .addEventListener("mouseout", function(event) { 
that.onMouseOut("glass", event); }); 

0.addComponent(picker); 


}); 
// 自动 旋转 场景 


var main = scene.findNode("vizi mobile"); 
var carousel = new Vizi.RotateBehavior({autoStart:true, 
duration:20}); 




















main.addComponent(carousel); 


// 将 所 有 的 材质 整合 到 一 个 集合 中 ,以便 改变 颜色 
var frame_parts_exp = 
/rear_view arm L|rear_view arm Ri|rear_view frame L|rear_view frame_R/; 





scene.map(frame_parts_exp, function(o) { 
o.map(Vizi.Visual, function(v) { 
that.part_materials.push(v.material); 
})); 
}); 


// 为 鼠标 经 过 行为 添加 选择 器 
scene.map(/body2|rear_view arm L|rear_view arm R/, function(o) { 
var picker = new Vizi.Picker; 
picker .addEventListener("mouseover", function(event) { 
that.onMouseOver("body", event); }); 
picker .addEventListener("mouseout", function(event) { 
that.onMouseOut("body", event); }); 
o.addComponent(picker); 


} 





scene.map("wheels", function(o) { 


var picker = new Vizi.Picker; 

picker .addEventListener("mouseover", function(event) { 
that.onMouseOver("wheels", event); }); 

picker .addEventListener("mouseout", function(event) { 
that.onMouseOut("wheels", event); }); 

o.addComponent(picker); 


} 


// 通知 页 面 加 载 完 成 

if (this.LoadCaLLback) { 
var LoadTime = (Date.now() - LoadStartTime) / 1000; 
this. loadCallback(loadTinme); 

















10.5.2 ”使 用 Vizi.FadeBehavior 来 动画 透明 度 


我 们 希望 将 Futurgo 模型 的 车 窗 变 成 半 透 明 的 ， 以 便 可 以 看 见 一 些 内 饰 的 细节 。 我 们 可 以 
在 模型 加 载 完 后 马上 设置 透明 度 ， 但 有 个 渐变 效果 的 话 会 更 有 趣 。 请 看 例 10-9。 


例 10-9: 给 车 窗 添 加 渐变 效果 

var that = this; 

scene.map(/windows_front|windows_rear/, function(o) { 
var fader = new Vizi.FadeBehavior({duration:2, opacity:.8}); 
o0.addComponent(fader); 
setTimeout(function() { 

fader .start(); 

}, 2000); 
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Vizi.FadeBehavior 组 件 可 以 为 任何 可 视 对 象 及 其 内 部 的 材质 添加 渐变 效果 。 它 的 参数 是 
duration (单位 是 秒 ) 和 目标 透明 度 值 opacity。 在 这 个 例子 中 ， 我 们 将 在 2 秒 的 时 间 里 渐 
变 到 0.8 透明 度 (有 点 透明 )。 我 们 还 在 渐变 前 通过 setTimeout() 加 了 2 秒 的 延迟 。 


为 了 了 解 Vizi.FadeBehavior 做 了 什么 ， 让 我 们 看 看 它 底层 的 实现 。 例 10-10 展示 了 Vizi 
源 文件 src/behaviors/fadeBehavior.js 的 部 分 代码 。 当 行为 启动 的 时 候 ， 它 遍历 所 有 包含 的 
可 视 对 象 ， 查 找 当 前 的 透明 度 。 这 会 被 用 作 Tweenjs 的 初始 值 (请 查阅 第 5 章 )。 然 后 补 
间 动 画 启动 ， 运 行 一 段 时 间 。 如 果 行 为 被 激活 ， 它 的 evaluate() 方法 会 在 每 次 运行 循环 的 
时 候 被 调用 。evaluate() 方法 首先 检查 循环 条 件 ， 如 果 需 要 的 话 会 重新 启动 行为 。 然 后 ， 
它 遍 历 所 有 包含 的 可 视 对 象 ， 设 置 它们 材质 的 透明 度 为 新 的 补 间 值 。 我 们 通过 一 致 的 界面 
来 为 对 象 及 它 的 组 件 轻松 添加 FadeBehavior 这 样 的 行为 ， 并 且 适 用 于 场景 中 所 有 的 可 视 元 
素 ， 这 个 功能 很 强大 。 


例 10-10: Vizi.FadeBehavior 的 实现 
Vizi.FadeBehavior .prototype.start = function() 















































if (this.running) 
return; 


if (this. realized && this. object.visuals) { 
var visuals = this. object.visuals; 
var i, len = visuals. length; 
for (i = 0; i < len; i++) { 
this.savedOpacities.push(visuals[i].material.opacity); 
this.savedTransparencies.push( 
visuals[il].material.transparent); 
visuals[i].material.transparent = this.targetOpacity < 1 ? 
true : false; 


} 


this.opacity = { opacity : this.savedOpacities[0] }; 

this.opacityTarget = { opacity : this.targetopacity }; 

this.tween = new TWEEN.Tween(this.opacity).to(this.opacityTarget, 
this.duration * 1000) 

.easing(TWEEN.Easing.Quadratic.InOut) 

.repeat(0) 

.Start(); 


Vizi.Behavior.prototype.start.call(this); 


} 
Vizi.FadeBehavior .prototype.evaluate = function(t) 
{ 
if (t >= this.duration) 
{ 
this. stop(); 
if (this.Loop) 
this. start(); 
} 


if (this. object.visuals) 





var visuals = this. object.visuals; 

var i, len = visuals.length; 

for (i = 0; i < len; i++) { 
visuals[i].material.opacity = this.opacity.opacity; 


} 


10.5.3 ”使 用 Vizi.RotateBehavior 来 自动 旋转 内 容 


可 以 使 用 鼠标 来 旋转 场景 这 点 很 好 ， 但 如 果 在 用 户 不 直接 交互 的 时 候 就 有 点 动画 那 就 更 好 
了 。 因 此 ,我 们 在 场景 加 载 后 设置 自动 旋转 。Futurgo 的 加 载 事件 回调 国 数 使 用 findNode() 
来 找到 Futurgo 场景 的 根 节 点 ， 然 后 给 它 添加 RotateBehavior 组 件 。 旋 转行 为 被 设置 为 自 
动 启动 ，20 秒 循环 一 次 。 请 看 例 10-11。 


例 10-11: 添加 一 个 Vizi.RotateBehavior 来 自动 旋转 内 容 
// 自动 旋转 场景 
var main = scene.findNode("vizi mobile"); 
Var Cohosel = New Vizi.RotateBehavior({autoStart:true, 
duration:20}); 
main.addComponent(carousel); 



































10.5.4 使 用 Vizi.Picker 来 实现 鼠标 悬 停 时 显示 信息 


鼠标 悬 停 是 一 个 提供 页 面 中 元 素 详细 信息 的 好 方法 。 我 们 可 以 使 用 第 9 章 介绍 过 的 Vizi. 
Picker 组 件 ， 来 拓展 实现 单个 对 象 在 3D 场景 中 鼠标 悬 停 时 显示 信息 的 想法 。 这 个 组 件 提 
供 了 通用 的 鼠标 处 理 方法 ， 当 鼠标 悬 停 在 特定 对 象 上 的 时 候 触 发 事件 。 


让 我 们 回 到 给 车 窗 添 加 淡出 行为 的 代码 。 注 意 这 段 代 码 还 添加 了 picker 组 件 ， 请 看 例 
10-12 中 粗 体 标注 的 代码 行 。 通 过 相同 的 方式 ， 我 们 给 车 身 各 个 部 分 及 轮子 添加 了 picker。 
每 个 回调 函数 使 用 了 不 同 的 标签 一 一 “glass”“body” 及 “wheels”"， 它 被 传递 给 应 用 以 判 
断 出 巧 停 在 哪个 部 分 。 


例 10-12: 添加 Vizi.Picker 组 件 来 实现 悬 停 

// 为 车 窗 添 加 进入 时 谈 出 的 行为 ,并 为 鼠标 经 过 行为 添加 选择 器 

var that = this; 

scene.map(/windows_front|windows_rear/, function(o) { 
var fader = new Vizi.FadeBehavior({duration:2, opacity:.8}); 
0.addComponent(fader ); 
setTimeout(function() { 

fader .start(); 

}, 2000); 



























































var picker = new Vizi.Picker; 

picker .addEventListener("mouseover", function(event) { 
that.onMouseOver("glass", event); }); 

picker .addEventListener("mouseout", function(event) { 
that.onMouseOut("glass", event); }); 
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o0.addComponent(picker); 


}); 
“7/ 为 鼠标 经 过 行为 添加 选择 器 


scene.map(/body2|rear_view arm L|rear_view arm R/, function(o) { 
var picker = new Vizi.Picker; 
picker .addEventListener("mouseover", function(event) { 
that.onMouseOver("body", event); }); 
picker .addEventListener("mouseout", function(event) { 
that.onMouseOut("body", event); }); 
0.addComponent(picker); 


]); 
scene.map("wheels", function(o) { 


var picker = new Vizi.Picker; 

picker .addEventListener("mouseover", function(event) { 
that.onMouseOver("wheels", event); }); 

picker .addEventListener("mouseout", function(event) { 
that.onMouseOut("wheels", event); }); 

0.addComponent(picker ); 


}); 


辅助 方法 Futurgo.onMouse0ver() 和 Futurgo.onMouse0ut() 只 是 调用 在 Futurgo 类 初始 化 时 
传 入 的 onMouseover 和 onMouseout 回调 函数 (参见 例 10-5 ) 。 


基 停 行为 如 图 10-8 所 示 。 当 鼠标 在 对 象 上 悬 停 时 ， 会 在 场景 窗口 的 右边 与 鼠标 指针 了 轴 近 
似 的 位 置 显示 一 个 DIV。 

















图 10-8: 悬 停 提 供 了 产品 的 更 多 信息 
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10.5.5 ”使 用 用 户 界面 来 控制 动画 


我 们 还 可 以 使 用 HTML 页 面 中 的 2D 界面 元 素来 控制 3D 场景 内 的 行为 。 当 我 们 点 击 右 
边 的 Interior 或 LTD Racing 标签 后 ， 它 会 启动 Futurgo 中 的 动画 。 例 10-13 中 展示 了 在 
HTML 页 面 内 设置 点 击 回调 ， 然 后 调用 Futurgo 对 和 象 中 方法 的 代码 。 这 些 方法 会 调用 查 
看 器 的 playAnimation() 和 stopAnimation() 方 法 来 完成 工作 。 不 过 需要 注意 一 点 : 我 们 

















需要 在 第 一 次 点 击 Interior 的 时 候 打开 车 窗 ， 再 次 点 击 的 时 候 关 闭 。 我 们 并 不 是 六 


独创 





建 了 打开 和 关闭 的 动画 ， 而 是 简单 地 在 第 二 次 点 击 的 时 候 反 着 播放 动画 。 请 看 Futurgo 
的 playCloseAnimations() 方法 ， 它 向 查看 器 多 传人 了 两 参数 。 第 二 个 参数 Loop 设置 为 
false， 第 三 个 参数 reverse 设置 为 true。 和 Tween.js 一 样 ，Vizi 的 动画 引擎 内 置 了 从 不 





同方 向 播放 动画 的 能 力 。 
例 10-13: 通过 用 户 界面 来 控制 动画 


Futurgo.prototype.playOpenAnimations = function() { 
this.playAnimation("animation window_rear_open"); 
this.playAnimation("animation window_front_open"); 


} 


Futurgo.prototype.playCloseAnimations = function() { 
this.playAnimation("animation window_rear_open", false, true); 
this.playAnimation("animation window_front_open", false, true); 


} 


Futurgo.prototype.toggleInterior = function() { 
this.vehicleOpen = !this.vehicleOpen; 
var that = this; 
if (this.vehicleOpen) { 
this.playOpenAnimations(); 


} 

else { 
this.playCloseAnimations(); 

} 


} 


Futurgo.prototype.playWheelAnimations = function() { 
this.playAnimation("animation wheel_L", true); 
this.playAnimation("animation wheel_R", true); 
this.playAnimation("animation wheel_front", true); 


} 

Futurgo.prototype.stopWheelAnimations = function() { 
this.stopAnimation("animation wheel_L"); 
this.stopAnimation("animation wheel_R"); 
this.stopAnimation("animation wheel_front"); 


} 


Futurgo.prototype.toggleWheelAnimations = function() { 
this.wheelsMoving = !this.wheelsMoving; 
if (this.wheelsMoving) { 
this.playWheelAnimations(); 
} 


else { 
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this.stopWheelAnimations(); 
} 
} 


10.5.6 ”使 用 颜色 选择 器 来 改变 颜色 

任何 遵循 业内 惯例 的 产品 展示 页 面 都 必须 提供 改变 颜色 的 能 力 ， 所 以 Futurgo 也 不 例外 。 
我 们 整合 了 一 个 jQuery 颜色 选取 控件 ， 供 用 户 为 他 们 的 爱 车 从 1600 万 种 颜色 中 选择 一 种 。 
改变 颜色 选取 控件 中 的 颜色 会 立刻 更 换 Futurgo 车 身 的 颜色 ， 如 图 10-9 所 示 。 
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10-9: 使 用 颜色 选取 器 改变 颜色 





让 我 们 查看 之 前 连接 鼠标 事件 与 对 象 的 代码 ， 它 在 Futurgo 的 onLoadComplete() 方法 里 。 
在 例 10-14 中 ,注意 map() 的 递归 调用 : 对 于 通过 正则 表达 式 查找 到 的 每 一 个 节点 ， 我 们 
将 查找 它 的 所 有 可 视 部 分 ， 并 将 它 的 Three.js 材质 插入 到 数组 part_materials 里 。 


例 10-14: 存储 Futurgo 车 身材 质 的 代码 
var frame_parts_exp = 
/rear_view arm Ll|rear_view arm R|rear_view frame L|rear_view frame_R/; 


scene.map(frame_parts exp, function(o) { 
o.map(Vizi.Visual, function(v) { 
that.part_materials.push(v.material); 
]); 
]); 


现在 我 们 保存 了 这 些 材质 ， 我 们 可 以 通过 用 户 界 面 来 控制 它们 。Futurgo 定义 了 另外 两 个 
方法 ， 分 别 用 于 获得 和 设置 车 身 的 颜色 ， 它 被 HTML 页 面 中 的 颜色 选择 器 所 使 用 。 请 看 例 
10-15。 

















230 | 第 10 章 


例 10-15: 获得 和 设置 Futurgo 车 身 颜色 的 代码 
Futurgo.prototype.getBodyColor = function() { 
var color = '#ffffff"'; 
if (this.part materials.length) { 
var material = this.part materials[0]; 
if (material instanceof THREE.MeshFaceMaterial) { 


color = '#' + material.materials[0].color.getHexString(); 
} 
else { 

color = '#' + material.color.getHexString(); 


} 
} 


return color; 


} 


Futurgo.prototype.setBodyColor = function(r, g, b) { 


// 将 hex rgb 颜色 值 转换 为 浮 点 数 
E235: 
g /= 255; 
b /= 255; 


var i, len = this.part materials.length; 
for (i = 0; i < len; i+t+) { 
var material = this.part materials[il]; 
if (material instanceof THREE.MeshFaceMaterial) { 
var j, mlen = material.materials.length; 
for (j = 0; j < mlen; j++) { 
material.materials[j].color.setRGB(r, g, b); 


} 
} 
else { 

material.color.setRGB(r, g, b); 
} 


} 


getBodyColor() 返回 了 车 身材 质 当 前 的 漫 反 射 颜色 。 尽 管 在 列表 中 有 好 儿 种 材质 ， 我 们 实 
际 上 只 需要 第 一 个 的 值 ， 因 为 (理论 上 ) 它们 是 一 样 的 。 我 们 返回 CSS 样式 的 十 六 进 制 字 
符 串 。 颜 色 选 择 器 使 用 这 个 值 在 弹出 层 出 现 前 初始 化 色 卡 和 输入 值 。 

而 对 于 setBodyCotor()， 我 们 必须 遍历 数组 中 所 有 的 材质 ， 设 置 它们 的 漫 反 射 颜色 。 回 忆 
一 下 ， 在 Three.js 中 ， 有 些 对 象 有 一 个 THREE.MeshFaceMaterial 类 型 的 材质 ， 它 实际 上 是 
一 个 对 象 的 每 个 面 的 材质 的 数组 。 在 上 面 代码 中 考虑 到 了 这 一 点 。setBodyColor() 方法 的 
RBG 值 是 从 颜色 选择 器 中 传 入 的 十 六 进 制 颜色 ( 即 从 9 到 255 的 整数 )， 而 Three.js 需要 
从 6 到 1 的 浮 点 数 ， 所 以 这 个 方法 进行 了 转换 。 
































TI 
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10.6 ”小结 


本 章 描述 了 构建 一 个 简单 但 完全 可 用 的 3D Web 应 用 的 详细 步骤 。 我 选择 了 一 个 3D 产品 
页 面 作为 例子 ， 因 为 它 能 充分 说 明 关键 概念 。 在 简要 介绍 了 视觉 设计 流程 后 ， 我 们 学 习 了 
如 何在 专业 DDC 工具 Maya 中 创建 内 容 ， 然 后 转换 为 适合 Web 的 glTF 格式 。 之 后 ， 我 们 
使 用 Vizi 框架 来 开发 预览 和 测试 3D 内 容 的 工具 。 再 然后 我 们 介绍 了 如 何 将 内 容 集 成 到 应 
用 页 面 中 。 最 后 ， 我 们 添加 了 几 个 行为 和 交互 ， 进 一 步 改进 ， 让 它 更 有 趣 和 更 易 用 。 

开发 3D Web 应 用 的 过 程 很 复杂 ， 不 过 有 了 合适 的 工具 和 知识 ， 你 会 发 现 它 是 很 好 实现 的 。 
下 一 章 会 介绍 一 些 新 的 3D 行为 和 交互 ， 但 你 在 本 章 学 到 的 全 部 流程 和 技术 都 可 以 应 用 到 
后 续 所 有 的 开发 中 。 






























































232 | 第 10 章 


第 11 章 


开发 一 个 3D 环 境 





第 10 草 介 绍 的 技术 覆盖 了 许多 使 用 场景 。3D 模型 可 以 用 来 构建 上 营销、 咨询、 娱乐 等 交互 
式 内 容 。 但 许多 3D 应 用 有 更 多 需求 。 如 有 果 想 开发 一 个 身 临 其 境 的 游戏 、 一 个 建筑 查看 器 ， 





或 者 一 个 交互 式 训练 系统 ， 我 们 需要 学 习 如 何 创建 3D 环境 ， 而 其 中 有 多 个 物体 以 及 更 复 
杂 的 交互 类 型 。 


在 本 章 中 ， 我 们 会 开发 一 个 3D 环境 ， 其 中 有 真实 的 风景 、 移 动 的 物体 ， 还 能 让 用 户 通过 
交互 式 地 控制 相机 来 在 场景 中 导航 。 我 们 将 扩展 在 第 10 章 中 开发 的 内 容 ， 创 建 一 个 虚拟 
的 城市 ， 在 其 中 试 驾 Futurgo 概念 车 。 图 11-1 展示 了 这 个 应 用 。 
Futurgo 停 在 城市 街道 上 ， 已 经 准备 好 供 人 试 各 了 。 场 景 横 跨 了 儿 个 街区 ， 远 处 若 隐 若 
现 的 摩天 大 楼 连接 着 灰 蒙蒙 的 天 空 ， 近 处 的 办 公 大 楼 上 反射 出 了 它们 的 影像 。 你 可 以 
使 用 鼠标 点 击 和 拖 搜 坟 上 下 左右 查看 ， 同 时 使 用 键盘 的 方向 键 来 上 下 左右 移动 。 走 近 
Futurgo， 点 击 它 来 坐 进去 忽 风 。 这 个 世界 或 许 看 起 来 有 些 空旷 ， 但 我 们 坐 在 自己 的 交通 
工具 中 很 安全 。 
在 你 的 浏览 器 中 打开 文件 Chapter 11/futurgoCity.html 来 试 试 。 在 构建 这 个 应 用 的 过 程 中 ， 
我 们 会 讨论 以 下 话题 。 
。 创建 环境 素材 

使 用 道路 、 建 筑 和 公园 来 组 装 真 实 的 3D 城市 场景 。 
。 预览 和 测试 
向 上 一 章 开发 的 预览 工具 中 添加 功能 。 对 于 这 个 项 目 而 言 ， 我 们 需要 一 个 预览 工具 ， 能 
加 载 多 个 文件 到 一 个 场景 中 ， 能 够 显示 场景 图 的 结构 ， 并 允许 我 们 查看 不 同 物体 的 属 
性 。 这 一 切 都 是 为 开发 应 用 所 做 的 准备 工作 。 
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图 11-1: 在 一 个 3D 环境 中 的 Futurgo 概念 车 


。 创建 一 个 3D 背景 
使 用 skybox 创建 一 个 真实 的 天 空 背景 ， 这 是 一 个 带 纹 理 的 立方 体 ， 放 在 背景 的 无 限 远 处 。 
同样 的 skybox 纹理 还 用 在 城市 建筑 和 车 辆 上 ， 作 为 反射 天 空 背 景 的 立方 体 环 境 贴图 。 
。 集成 3D 到 应 用 中 
管理 加 载 多 个 模型 到 同一 个 应 用 的 细节 ， 调 整 车 模型 的 灯光 、 位 置 和 其 他 属性 来 匹配 周 
围 环境 。 
。 实现 第 一 人 称 导 航 
为 用 户 提 供 通 过 鼠标 和 键盘 在 场景 中 环顾 四 周 及 到 处 移动 的 方法 ， 并 实现 碰撞 机 制 使 得 
用 户 不 会 穿 过 实体 物体 。 
。 使 用 多 个 相机 
切换 相机 ， 人 允许 用 户 从 不 同 角度 查看 场景 ,使 用 不 同方 式 进 行 浏 览 。 
。 创建 定时 的 动画 过 小 
使 用 计时 器 和 动画 技术 来 在 用 户 进 入 和 离开 车 的 时 候 ， 创 建 动画 序列 。 
。 对 象 行 为 脚本 
使 用 Vizi 框架 创建 自 定 义 组 件 ， 来 控制 Futurgo 车 的 行为 和 外 观 。 
使 用 声音 通过 添加 HTMLS5 声音 元 素来 增强 环境 。 
。 泻 染 动态 纹理 
通过 使 用 2D Canvas API 来 以 编程 的 方式 更 新 3D 物体 的 纹理 ， 为 用 户 提 供 实时 反馈 。 
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我 们 在 本 章 中 创建 的 虚拟 场景 很 简单 。 一 个 典型 的 游戏 或 其 他 3D 环境 会 有 更 多 的 物体 及 
更 复杂 的 交互 。 不 过 这 里 介绍 的 技术 ， 为 学 习 如 何 开发 更 复杂 的 场景 提供 了 良好 的 开端 。 


11.1 创建 环境 素材 


为 了 开发 3D 环境 ， 我 再 次 和 艺术 家 TC Chang 合作 。 创 建城 市 背景 素材 是 很 费时 的 ， 所 
以 TC 和 我 决定 寻找 现成 的 模型 。 我 们 在 TurboSquid 上 找到 了 一 个 优秀 的 候选 作品 ， 如 图 
11-2 所 示 。 














图 11-2: ES3DStudios 创建 的 城市 模型 ， 图 片 由 TurboSquid 提供 


这 个 城市 模型 是 使 用 Lightwave 建 模 工具 (https:/www.lightwave3d.com/overview/) 创建 
的 。 作 者 已 经 将 它 转换 成 了 多 种 格式 ， 包 括 Autodesk Maya。 我 们 购买 和 下 载 模型 后 ，TC 
将 它 导入 Maya 中 ， 为 在 应 用 中 使 用 做 准备 。 这 个 模型 有 充满 细节 和 纹理 的 建筑 ,但 没有 
光源 。TC 添加 了 三 个 光源 ， 这 样 模 型 就 可 以 使 用 了 。 将 它 导 出 为 COLLADA 格式 并 加 载 
到 预览 工具 (参见 下 一 节 ) 中 后 ， 我 们 发 现 了 一 个 有 关 纹 理 贴图 透明 度 的 小 问题 。 不 过 总 
体 来 说 ， 在 应 用 中 使 用 这 个 模型 只 需 做 非常 少 的 额外 工作 。 
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11.2 预览 和 测试 环境 


为 了 测试 城市 场景 这 样 的 复杂 模型 ， 我 们 需要 一 个 类 似 第 10 章 创建 的 预览 工具 ， 但 它 需 
要 更 多 功能 。 新 的 增强 版 预览 工具 如 图 11-3 所 示 ， 它 增加 了 以 下 几 个 功能 
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图 11-3: 显示 在 Vizi 预览 工具 中 的 城市 环境 
。 多 种 浏览 模式 
能 够 使 用 相机 朝 着 一 个 单一 模型 的 中 心 来 浏览 ， 或 者 用 相机 朝 着 地 面 来 浏览 场景 
。 场景 图 检查 
一 个 场景 图 的 树 形 结 构 视 图 ， 用 来 显示 对 象 的 名 称 和 父子 关系 。 
。 对 象 检查 


一 个 弹出 层 属性 列表 显示 每 个 对 象 的 详情 ， 包 括 变换 信息 、 网 格 统计 信息 、 材 质 属性 ， 
以 及 相机 和 光源 的 参数 。 

















边界 框 显 示 
一 个 线 框 盒 显示 在 所 选 对 象 的 周围， 还 有 一 个 选项 可 以 显示 场景 中 所 有 物体 的 边界 框 。 
。 多 物体 预览 


能 够 在 同一 个 预览 中 加 载 多 个 物体 ， 用 来 观察 和 测试 它们 合成 后 的 效果 。 


打开 文件 Chapter 11/previewer.html。 点 击 Open 按钮 会 出 现 一 个 文件 对 话 框 ， 打 开 文 件 ../ 
models/futurgo_city/futurgo_city.dae。 使 用 相机 列表 ， 选 择 标记 为 [default] 的 相机 来 自由 导 
航 。 使 用 鼠标 来 旋转 ， 使 用 触摸 板 或 滚轮 来 缩放 ， 你 可 以 检查 城市 模型 。( 注 意 其 他 相机 
不 允许 你 使 用 鼠标 自由 导航 ， 只 有 [default] 可 以 。) 
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11.2.1 以 第 一 人 称 模式 预览 场景 

当 你 旋转 和 缩放 城市 模型 的 时 候 ， 或 许 会 注意 到 相机 不 能 完全 到 达 场 景 的 地 面 (街道 )。 
这 是 因为 预览 工具 默认 设计 为 将 模型 当成 一 个 单一 对 象 ， 相 机 指向 的 是 对 象 的 几何 中 心 。 
单一 对 象 的 方案 并 不 适合 环境 ， 所 以 我 们 添加 了 另 一 种 浏览 模式 作为 辅助 。 

在 预览 工具 界面 的 右上 角 ， 有 一 个 单 选 按钮 组 来 让 你 切换 浏览 模式 。 这 个 组 的 标签 为 控 
制 器 (Controller)， 有 两 种 不 同 的 相机 控制 器 模式 : 模型 模式 (Model) 和 第 一 人 称 模式 
(FPS)。 我 们 的 城市 应 用 将 使 用 第 一 人 称 控制 器 ， 它 是 设计 用 来 在 环境 中 导航 的 ， 而 不 是 
查看 一 个 单独 的 模型 。( 第 一 人 称 导 航 将 在 本 章 后 面 详细 地 介绍 。) 点 击 FPS 按钮 ， 相 机 会 
下 降 ， 旋 转 的 中 心 现在 在 街道 上 了 ， 你 可 以 缩放 到 街道 表面 上 。 


注意 ， 预 览 工具 的 FPS 模式 并 不 是 真正 使 用 第 一 人 称 导 航模 式 来 浏览 模型 。 它 只 是 简单 地 
将 相机 放 到 你 在 真实 第 一 人 称 模式 中 相似 的 位 置 上 ， 它 更 适合 预览 整个 环境 。 预 览 工具 内 
部 依然 使 用 一 个 模型 控制 器 ， 因 此 我 们 可 以 快速 缩放 和 旋转 整个 模型 。 换 句 话说， 有 时 候 
我 们 希望 将 场景 当成 一 个 单一 模型 来 方便 操作 ， 有 时 候 我 们 希望 模拟 在 应 用 中 浏览 环境 的 
时 候 会 看 到 的 效果 。 预 览 工 具 中 的 FPS 按钮 这 一 简单 的 小 技巧 能 做 到 两 全 其 美 。 


11.2.2 ”检查 场景 图 


因为 我 们 的 场景 变 得 更 加 复杂 ， 所 以 我 们 需要 预览 工具 能 更 精细 地 查看 它们 。 以 城市 场景 
为 例 ， 它 由 超过 200 个 单独 的 网 格 组 成 ， 显 示 在 预览 工具 的 场景 状态 栏 中 。 为 了 在 应 用 中 
程序 化 交互 ， 我 们 需要 找到 独立 对 象 的 名 称 、 大 小 、 位 置 、 类 型 (如 网 格 、 相 机 或 光源 ) 
等 属性 ， 以 及 对 象 的 层级 结构 。 这 对 于 从 第 三 方 获 得 的 模型 尤其 重要 ， 因 为 在 这 种 情况 
下 ， 我 们 不 能 和 创建 内 容 的 艺术 家 进行 密切 沟通 。 


一 个 粗暴 的 方式 是 在 文本 编辑 器 中 打开 COLLADA 或 glTF 文件 来 检查 场景 图 ， 查 找 指示 
类 型 的 具体 文本 。 但 这 对 绝 大 多 数 开 发 者 而 言 都 是 令 人 发 狂 的 体验 ， 它 需要 技术 细 广 知 
识 ， 知 晓 这 些 文件 格式 是 如 何 组 织 的 。( 我 个 人 对 这 两 种 文件 格式 都 非常 了 解 ， 但 我 没 耐 
心 浏览 大 量 的 文本 ， 在 其 中 大 海 捞 针 般 地 寻找 。) 一 个 更 好 的 方式 是 由 预览 工具 来 为 我 们 
展现 这 个 信息 。 

增强 版 的 预览 工具 包含 一 个 新 的 面板 Scene， 并 且 有 一 个 列表 框 来 展示 场景 图 层级 结构 的 
树 状 图 。 你 最 好 花 些 时 间 深 动 列表 ， 点 击 加 号 和 减 号 来 展开 和 收 起 层级 ， 看 看 它 是 怎么 组 
组 的 : 在 顶层 有 几 个 光源 ， 接 下 来 是 一 个 名 为 MidTower_Block_61 的 组 ， 后 面 是 儿 个 相机 。 
注意 组 旁边 的 加 号 ， 如 果 你 点 击 它 ， 这 个 组 会 展开 显示 子 层 级 ， 有 名 称 为 Tower_A_01、 
Roof_Detail_01 等 的 对 象 。 这 些 组 中 有 些 会 自 展开 以 显示 子 对 象 。 


有 了 在 场景 中 查看 节点 名 称 和 层级 关系 的 能 力 ， 我 们 就 可 以 确定 在 运行 应 用 时 ， 将 要 向 哪 
个 对 象 添 加 交互 以 及 其 他 一 些 细节 。 上 比如， 在 应 用 中 加 载 完 场景 后 ， 我 们 将 添 加 环境 贴图 
来 反射 天 空 背 景 ,但 只 用 于 建筑 而 不 是 道路 或 公园 上 。 浏 览 场 景 层级 结构 显示 ， 建 筑 的 名 
称 都 以 “Tower” 或 “Office” 开 头 ， 所 以 我 们 就 可 以 使 用 Vizi.0bject.map() 这 个 场景 图 
API 方 法 ， 来 查找 所 有 匹配 这 个 正则 表达 式 的 对 象 ， 并 修改 它们 的 材质 。 我 们 将 在 本 章 稍 
后 介绍 实现 的 代码 。 


































































































































































































开发 一 个 3D 环 境 | 237 





预览 工具 中 使 用 的 树 状 图 是 用 一 个 叫 dynatree (http://code.google.com/p/dynatree/) 的 
jQuery 插件 实现 的 。 例 11-1 展示 了 使 用 多 种 参数 初始 化 树 状 图 控件 的 代码 ， 和 设置 当 项 被 
单 击 或 双击 时 的 回调 函数 的 代码 。 预 览 工具 的 源码 可 以 在 文件 Chapter 11/previewer.html 中 
找到 。 


例 11-1: 初始 化 dynatree 树 状 图 控件 
function initSceneTree(viewer) { 
// 初始 化 <div> 元 素 中 的 树 
$("#scene_tree").dynatree({ 
imagePath: "./images/previewer_skin/", 
title: "Scene Graph", 
minExpandLevel: 2， 
selectMode: 1， 
onDblClick: function(node) { 
openSceneNode(viewer, node); 











mp 





}， 
onActivate: function(node) { 
selectSceneNode(viewer, node); 
if (infopopupVisible) { 
openSceneNode(viewer, node); 


} 

}， 

onDeactivate: function(node) { 
}， 

onFocus: function(node) { 

}， 

onBLur: function(node) { 

}， 


}); 
} 
现在 我 们 来 分 析 如 何在 场景 文件 加 载 好 后 ， 基 于 场景 图 的 内 容 填 充 树 状 图 控件 。 首 先 ， 我 
们 在 加 载 回 调 中 添加 了 一 行 代 码 ， 来 调用 辅助 函数 updateSceneTree()。 


function onLoadComplete(data, loadStartTime) 














// 隐藏 加 载 状态 栏 
var LoadStatus = document.getELementById("LoadStatus" ) ; 
loadStatus.style.display = 'none'; 


viewer .replaceScene(data); 


var loadTime = (Date.now() - loadStartTime) / 1000; 

var LoadTimeStats = document.getElementById("load_ time_stats"); 
loadTimeStats.innerHTML = "Load time<br>" + loadTime.toFixed(2) + "s" 
// Vizi.System.log("Loaded " + loadTime.toFixed(2) + " seconds."); 


updateSceneTree(viewer); 
updateCamerasList(viewer); 
updateLightsList(viewer); 
updateAnimationsList(viewer); 
updateMiscControls(viewer); 


if (viewer.cameraNames.length > 1) { 





selectCamera(1); 


} 


addRollovers(viewer, data.scene); 


J 
updateSceneTree() 做 了 几 件 事情 。 首 先 ， 它 在 树 状 图 的 根 节 点 调用 removeChildren() 来 重 


新 初始 化 树 状 图 控件 ， 因 为 它 在 之 前 浏览 其 他 场景 的 时 候 可 能 已 经 被 填充 过 。 然 后 ， 它 调 
用 另 一 个 函数 buildsceneTree() 来 遍历 场景 图 ， 并 填充 树 状 图 控件 的 内 容 。 注 意 这 个 调用 
封装 到 了 一 个 setTimeout() 中 ， 稍 微 延 迟 了 一 下 。 这 个 延迟 是 为 了 更 好 的 用 户 体验 。 使 用 
dynatree 构建 树 状 图 需要 一 些 时 间 ， 而 我 们 不 想 拖 慢 场景 的 初始 演 染 。 所 以 我 们 在 开始 的 
时 候 放 了 一 个 占 位 信息 ， 当 timeout 触发 的 时 候 删 掉 。 


function updateSceneTree(viewer) { 


















































// 示例 :用 代码 添加 一 个 层级 hierarchic branch 
// 这 里 展示 了 我 们 如 何 用 程序 添加 树 节 点 
var rootNode = $("#scene_ tree").dynatree("getRoot"); 
rootNode.removeChildren(); 
var initMessage = rootNode.addChild({ 
title: "Initializing...", 
isFolder: false, 


}); 

















setTimeout(function() { 
rootNode.removeChild(initMessage); 
rootNode .expand(false); 
var i, len = viewer.scenes.length; 
for (i = 0; i < len; i++) { 

buildSceneTree(viewer.scenes[i], rootNode); 

} 

}, 1000); 

} 


填充 场景 树 状 图 的 代码 实际 上 很 简单 ，buildsceneTree() 函数 的 源码 在 文件 Chapter 11/ 
sceneTree.js 中 。 例 11-2 完整 展示 了 它 。 


例 11-2: 填充 场景 树 状 图 


sceneTreeMap = {}; 














buildSceneTree = function(scene, tree) { 
function build(object, node, level) { 
var noname = level ? "[object]" : "Scene"; 


var childNode = node.addChild({ 
title: object.name ? object.name : noname, 
expand: level <= 1， 
activeVisible:true, 
Vizi:object, 


2 
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sceneTreeMap[object._ id] = childNode; 


var i, len = object._chiLdren.Length; 
for (i = 0; i < len; i++) { 
build(object. children[i], childNode, level+1); 
} 
} 


build(scene, tree, 0); 


} 

首先 ， 我们 初始 化 一 个 全 局 对 象 sceneTreeMap， 它 将 Vizi 场景 图 中 的 Vizi 对 象 与 树 状 图 控 
件 中 的 项 关联 起 来 。 我 们 将 用 它 来 支持 点 击 场景 中 的 某 个 对 象 时 ， 高 亮 控 件 中 关联 的 项 。 
在 buildsceneTree() 了 国 数 内 部 ， 我 们 定义 了 一 个 内 上 租 了 国 数 buitd()， 它 会 递归 添加 项 到 树 
控件 中 。 对 于 Vizi 场景 图 中 的 每 个 对 象 ，build() 函数 会 调用 node.addChiLd() 创建 一 个 新 
的 树 控 件 节 点 。node.addChild() 方法 基于 所 提供 的 参数 创建 了 一 个 新 的 项 。 


title 是 项 显示 的 标签 ，expend 标识 指示 初始 显示 时 是 否 展开 项 。 我 们 只 在 场景 图 顶层 
展开 。activeVvisiblte 定义 了 如 果 激 活 某 一 项 〈 即 从 代码 中 选择 它 ， 比 如 当 在 场景 中 点 击 
关联 的 对 象 时 ) ， 树 状 图 控件 就 滚动 到 并 选 定 它 。 传 递 的 最 后 一 个 参数 是 vizi， 它 是 Vizi 
场景 图 对 象 ， 将 会 在 用 户 点 击 树 状 图 控件 中 的 一 项 的 时 候 用 到 。 当 点 击 的 时 候 ， 预 览 工 
具 会 使 用 黄色 线 框 盒 高 亮 它 ， 当 双击 的 时 候 会 显示 一 个 相关 节点 属性 的 弹出 层 (将 在 下 


一 市 介 绍 )。 


当 树 控件 的 项 创建 好 后 ， 我 们 将 它 添 加 到 sceneTreeMap 对 象 中 供 后 续 使 用 ， 如 果 它 有 子 市 
点 ， 就 会 递归 调用 build() 来 添加 树 控 件 项 。 


创建 一 个 好 的 基于 HTML 的 树 状 图 需要 很 多 工作 。 幸 运 的 是 ，dynatree 的 
开发 者 让 我 们 免 去 了 这 个 痛苦 。dynatree 允许 你 立刻 创建 一 个 任意 层级 的 
HTML 树 状 图 ， 它 还 有 一 个 功能 强大 、 易 于 使 用 的 API 来 创建 /修改 / 删 
除 项 ， 并 且 它 支持 完全 自 定义 样式 。dynatree 的 代码 托管 在 Google code 
(http://code.google.com/p/dynatree/) 上 。 






















































































11.2.3 ”检查 对 象 属性 

预览 工具 允许 我 们 检查 每 个 对 象 的 属性 。 双 击 场景 树 状 图 的 一 个 对 象 ， 就 会 弹出 一 个 带 标 
签 的 jQuery 对 话 框 (或 者 属性 页 单 ) 来 显示 详情 。 如 图 11-4 所 示 ， 其 中 的 属性 页 单 显 示 
了 名 为 Tower_D_01 的 对 象 的 属性 。 它 包含 三 个 标签 : 一 个 显示 变换 信息 (位 置 、 旋 转 和 缩 
放 ) ;一 个 显示 几何 体 的 详情 ， 包 括 网 格 中 顶点 和 面 的 数量 ， 以 及 它 的 边界 框 ， 一 个 显示 
材质 信息 ， 包 括 着 色 模 型 、 颜 色 、 纹 理 贴 图 的 图 片 名 称 。 
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图 11-4: 使 用 预览 工具 来 检查 对 象 属性 


预览 工具 还 允许 我 们 在 3D 场景 中 点 击 对 象 的 时 候 查看 其 属性 。 如 果 你 在 属性 页 单 已 经 打 
开 的 时 候 点 击 对 象 ， 它 的 内 容 会 替换 为 新 对 象 的 属性 。 如 果 属 性 页 单 没有 打开 ， 你 可 以 双 
击 对 象 来 弹出 这 个 对 话 框 以 显示 对 象 的 属性 。 


例 11-3 展示 了 在 3D 场景 中 添加 点 击 监听 的 代码 ( 源 文件 为 Chapter 11/previewer.html)， 
这 使 得 用 户 可 以 选择 单个 物体 。 函 数 addRoLLovers() 使 用 Vizi 场景 图 API 的 map() 方法 来 
查找 场景 中 的 每 一 个 对 象 ， 并 创建 一 个 新 的 Vizi.Picker 对 象 来 添加 鼠标 事件 响应 。 代 码 
添加 了 对 鼠标 down ( 按 下 )、up ( 松 开 )、over ( 悬 停 )、 双 击 (double-click) 事件 的 响应 。 


例 11-3: 实现 在 场景 中 选择 对 象 
function addRollover(viewer, 0o) { 
var picker = new Vizi.Picker; 
picker .addEventListener("mouseover", function(event) { 
onpickerMouseOver(viewer, o, event); }); 
picker .addEventListener("mouseout", function(event) { 
onpickerMouseOut(viewer, o, event); }); 
picker .addEventListener("mouseup", function(event) { 
onpickerMouseUp(viewer, o, event); }); 
picker .addEventListener("dblclick", function(event) { 
onPpickerMouseDoubleClick(viewer, o, event); }); 
o0.addComponent(picker); 








} 


function addRollovers(viewer, scene) { 
scene.map(Vizi.0Object, function(o) { 
addRollover (viewer, 0); 


}); 
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鼠标 松 开 事 件 的 监听 代码 ， 是 用 来 检测 单 击 的， 双击 的 检测 在 后 面 。 它 们 几乎 是 一 样 的 。 
首先 ， 我 们 检查 事件 的 按键 代号 ， 因 为 预览 工具 只 支持 使 用 鼠标 左 键 选择 。 如 果 是 左 键 ， 
我 们 调用 Vizi.viewer 的 highLightobject() 方法 。 它 会 在 被 点 击 对 象 周围 画 一 个 黄色 的 线 
框 盒 (我 们 会 在 下 一 节 介 绍 边界 框 高 亮 的 实现 细节 ) 。 
接着 ， 我 们 高 亮 树 状 图 中 关联 的 项 ， 使 用 Vizi 对 象 的 .id 属性 (这 个 属性 会 由 Vizi 引擎 在 
对 象 创建 的 时 候 自 动 生 成 ) 来 作为 索引 查找 树 中 相关 的 项 ， 并 高 亮 它 。 最 后 ， 如 果 是 单 击 
且 属 性 页 单 已 经 可 见 了 (通过 infoPopupVisible 变量 来 标识 ) ， 我 们 调用 openSceneNode() 
方法 ， 它 是 一 个 使 用 新 选择 节点 来 重新 填充 属性 页 单 的 辅助 方法 。 对 于 双击 的 情况 ， 我 们 
直接 调用 openSsceneNode() ， 如 果 对 话 框 没 显示 的 就 会 将 它 弹 出 来 。 
function onpickerMouseUp(viewer, o, event) { 
if (event.button == 0) { 
viewer .highlightObject(o0); 
node = selectSceneNodeFromId(viewer, o._id); 


if (node && infopopupVisible) { 
openSceneNode(viewer, node); 







































































} 
} 
} 


function onpickerMouseDoubleClick(viewer, o, event) { 
if (event.button == 0) { 
viewer .highlightObject(o0o); 
node = selectSceneNodeFromId(viewer, o._id); 
openSceneNode(viewer, node); 
} 
} 


11.2.4 ”显示 边界 框 

预览 工具 使 用 边界 框 来 实现 两 个 功能 : 高 亮 所 选 的 对 象 ， 如 果 你 选择 了 界面 中 的 “显示 所 
有 对 象 边界 框 ” 选 项 ， 就 显示 所 有 对 象 的 边界 框 。 

为 了 高 亮 所 选 对 象 ，Vizi.Viewer 提供 了 一 个 叫 highlightobject() 的 方法 。 例 11-4 展示 了 
它 的 实现 。 首 先 ， 查 看 器 移 除 当前 对 象 的 高 亮 〈 如 果 有 的 话 ) ， 然 后 计算 新 对 象 的 边界 框 ， 
使 用 它 来 创建 一 个 黄色 的 线 框 盒 围 绕 对 象 。 


这 里 有 儿 个 需要 广 意 的 地 方 ， 请 看 粗 体 标 出 的 代码 。 我 们 创建 了 一 个 Vizit.Decoration 
对 象 来 包含 边界 框 立 方 体 。Vizt.Decoration 是 一 个 特殊 的 Vizi.Visual 子 类 ,框架 使 
用 它 来 泻 染 你 可 以 看 见 但 不 进行 交互 的 内 容 。 它 不 会 干扰 选取 或 磁 撞 。 之 后 ， 我 们 添加 
decoration 到 对 象 的 父 节 点 上 ， 而 不 是 这 个 对 象 中 。 任 意 对 象 的 边界 框 都 是 在 父 节 点 的 坐 
标 系 统 中 计算 的 ， 所 以 我 们 需要 将 它 作 为 父 节 点 的 子 节 点 添加 到 场景 图 中 ， 以 便 正 确 地 进 
行 变换 。 

例 11-4: 创建 所 选 对 象 的 高 亮 框 


Vizi.Viewer.prototype.highlightObject = function(object) { 





















































if (this.highlightedObject) { 
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this.highlightedObject._parent.removeComponent( 
this.highlightDecoration); 


} 


if (object) { 
var bbox = Vizi.SceneUtils.computeBoundingBox(object); 


var geo = new THREE.CubeGeometry(bbox.max.x - bbox.min.x, 
bbox.max.y - bbox.min.y, 
bbox.max.z - bbox.min.z); 


var mat = new THREE.MeshBasicMaterial({color:0Qxaaaa00, 
transparent:false, 
wireframe:true, opacity:1}) 


var mesh = new THREE.Mesh(geo, mat); 


this.highlightDecoration = new Vizi.Decoration({object:mesh}); 


object._parent.addComponent(this.highlightDecoration); 


var center = bbox.max.clone().add(bbox.min) 
.multiplyScalar(0.5); 
this.highlightDecoration.position.add(center); 


} 


this .highLighted0bject = object; 
} 


预览 工具 允许 你 查看 所 有 对 象 的 边界 框 。 在 右 下 角 的 Miscellaneous 栏 中 ， 有 一 个 名 为 
Boxes 的 复 选 框 。 点 击 它 ， 显 示 所 有 对 象 的 边界 框 ， 你 可 以 看 到 类 似 图 11-5 所 示 的 绿色 


线 框 。 
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图 11-5: 预览 工具 显示 场景 中 所 有 对 象 的 边界 框 ( 另 见 彩 插图 11-5) 
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显示 每 个 对 象 边界 框 的 代码 类 似 创 建 高 亮 框 的 代码 ， 只 是 这 次 我 们 使 用 Vizi 场景 图 API 的 
map() 方法 来 将 其 应 用 到 场景 图 中 的 所 有 对 象 上 。 请 看 例 11-5。 


例 11-5: 为 场景 中 的 所 有 对 象 创建 边界 杠 
this.sceneRoot.map(Vizi.0bject, function(o) { 
if (o. parent) { 
var bbox = Vizi.SceneUtils.computeBoundingBox(o0o); 



































var geo = new THREE.CubeGeometry(bbox.max.x - bbox.min.x, 
bbox.max.y - bbox.min.y, 
bbox.max.z - bbox.min.z); 
var mat = new THREE.MeshBasicMaterial( 
{color:O0x00ff00, transparent:true, 
wireframe:true, opacity: .2}) 
var mesh = new THREE.Mesh(geo, mat) 
var decoration = new Vizi.Decoration({object:mesh}); 
0._parent.addComponent(decoration); 


var center = bbox.max.clone().add(bbox.min) 
.multiplyScalar(0.5); 

decoration.position.add(center); 

decoration.object.visible = this.showBoundingBoxes; 


} 
DD; 


现在 ， 当 用 户 点 击 Boxes 复 选 框 来 开关 这 个 功能 的 时 候 ， 预 览 工具 调用 查看 器 的 
setBoundingBoxes0n() 方法 。 这 个 方法 使 用 map() 来 查找 每 个 类 型 为 Vizi.Decoration 的 对 
象 ， 通 过 设置 它 的 visible 属性 来 开关 它 的 可 见 性 。 


Vizi.Viewer.prototype.setBoundingBoxesOn = function(on) 





this.showBoundingBoxes = !this.showBoundingBoxes; 
var that = this; 
this.sceneRoot.map(Vizi.Decoration, function(o) { 
if (!that.highlightedObject || (o != that.highlightDecoration)) { 
Oo.visible = that.showBoundingBoxes; 


}); 


11.2.5 ”预览 多 个 对 象 


当 你 使 用 多 个 对 象 来 构建 一 个 环境 时 ， 能 够 将 它们 放 到 一 起 预览 和 测试 是 至 关 重 要 的 。 我 
们 需要 保证 对 象 的 比例 是 一 致 的 ， 相 对 位 置 正确 ， 光 照 合适 等 ， 尤 其 是 对 象 来 自 多 个 地 
方 ， 由 不 同 的 艺术 家 创建 ， 托 管 在 不 同 的 模型 共享 网 站 上 时 。 

让 我 们 将 Futurgo 车 模型 放 到 城市 场景 中 测试 这 些 属性 。 点 击 顶部 菜单 栏 的 Add 按钮 ， 在 
文件 选择 框 中 选择 ../models/futurgo_mobile/futurgo_mobile.json。( 请 保证 你 使 用 的 是 默认 
相机 ， 并 且 正 对 着 场景 中 间 的 主 路 ， 这 是 模型 将 出 现 的 地 方 。) 模型 会 在 场景 的 中 间 出 现 。 
放大 来 近 距离 观察 ,如 图 11-6 所 示 。 






























































图 11-6: 将 Futurgo 模型 添加 到 城市 场景 中 


添加 更 多 模型 到 已 有 场景 的 代码 ， 几 乎 和 加 载 初始 模型 的 代码 一 样 : 创建 一 个 Vizi. 
Loader 对 象 ， 添 加 一 个 监听 模型 加 载 完 成 的 事件 处 理 函 数 ， 并 在 事件 监听 函数 中 添加 新 
的 场景 对 象 到 查看 器 中 。 唯 一 的 不 同 是 我 们 将 对 象 添加 到 查看 器 中 ， 而 不 是 替换 它们 。 例 
11-6 展示 了 相关 代码 ( 源 文件 Chapter 11/previewer.html) 。 我 们 调用 viewer .addToScene()， 
它 会 添加 对 象 (本 例 中 是 Futurgo 车 模型 ) 到 当前 运行 的 场景 图 中 ， 并 更 新 查看 器 的 数据 
结构 。 然 后 我 们 和 之 前 一 样 更 新 用 户 界 面 : 树 状 图 ， 以 及 光源 、 相 机 和 动画 的 列表 。 


例 11-6: 插入 更 多 模型 到 场景 中 
function onAddComplete(data, loadStartTime) 
{ 
// 隐藏 加 载 状态 栏 
var LoadStatus = document.getElementById("loadStatus"); 
loadStatus.style.display = 'none'; 


viewer .addToScene(data); 


var LoadTime = (Date.now() - loadStartTime) / 1000; 

var loadTimeStats = document.getElementById("load_ time stats"); 
loadTimeStats.innerHTML = "Load time<br>" + loadTime.toFixed(2) + "s" 
// Vizi.System.log("Loaded " + loadTime.toFixed(2) + " seconds."); 


updateSceneTree(viewer); 
updateCamerasList(viewer); 
updateLightsList(viewer); 
updateAnimationsList(viewer); 
updateMiscControls(viewer); 


addRollovers(viewer, data.scene); 
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你 或 许 已 经 注意 到 ，Futurgo 添加 到 场景 的 时 候 过 于 明亮 了 。 这 是 因为 Futurgo 模型 包含 它 
自己 的 光源 ， 我 们 在 第 10 章 创 建 应 用 的 时 候 使 用 过 。 我 可 以 找 TC 做 一 个 没有 光源 版 本 的 
车 模型 ， 来 在 这 个 应 用 中 使 用 ， 但 实际 上 这 并 不 需要 。 使 用 预览 工具 ， 我 们 可 以 找 出 是 哪 
些 光 源 导致 了 这 个 问题 ， 并 将 它们 关 掉 ， 然 后 记 下 光源 的 名 称 ， 在 程序 中 也 这 么 做 。 

使 用 预览 工具 的 光源 列表 ， 我 们 关 掉 不 想 要 的 光源 。 我 注意 到 它们 应 该 是 添加 到 光源 列表 
后 面 的 光源 ， 因 为 Futurgo 模型 是 最 后 添加 到 场景 中 的 。 所 以 我 关 掉 了 列表 末尾 的 三 个 点 
光源 。 车 依然 看 起 来 有 点 苍白 ， 所 以 我 也 关 掉 了 环境 光 。 这 下 管用 了 。 图 11-7 显示 了 关 掉 
四 个 光源 后 的 效果 。 注 意 用 户 界面 内 椭圆 高 亮 的 区 域 ， 里 面 的 值 改 变 了 。 
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图 11-7: 调整 光源 后 城市 场景 中 的 Futurgo 模型 


11.2.6 ”使 用 预览 工具 来 查找 场景 中 的 其 他 问题 

使 用 预览 工具 还 找到 了 这 个 场景 中 另 一 个 技术 问题 : 树 。 这 个 场景 的 作者 使 用 了 久 经 考验 
的 技巧 来 低 成 本 泻 染 树 : 一 系列 重 琶 的 平面 多 边 形 ， 上 面 有 从 不 同 角度 查看 的 树 纹理 贴 
图 。 通 常 ， 会 有 两 个 垂直 的 多 边 形 以 X 状 摆 放 ， 再 有 一 个 或 多 个 水 平 的 多 边 形 与 这 个 X 
形 十 字 交 又 。 这 是 建 模 师 使 用 多 年 的 一 个 简单 技巧 ， 可 以 节省 多 边 形 数 量 。 否 则 你 设想 一 
下 创建 逼真 的 树叶 所 需 的 三 角形 数量 吧 。 

在 WebGL 中 使 用 模型 作者 关于 树 的 设置 时 ， 唯 一 的 问题 是 图 片 格式 的 选择 : 每 个 多 边 形 
的 纹理 都 是 一 对 微软 BMP 文件 ， 一 个 是 颜色 信息 ， 另 一 个 是 alpha 蒙 版 (alpha mask) 。 我 
们 不 知道 如 何在 ViziThree.js 中 轻松 地 处 理 它 。 这 在 技术 上 可 行 ， 但 引擎 目前 还 没有 支持 。 
所 以 我 让 TC 将 树 的 一 对 BMP 文件 转 成 一 个 带 alpha 通道 的 PNG 文件 。 他 这 人 么 做 了 ， 然 
后 更 新 Maya 文件 并 重新 导出 。 之 前 和 之 后 的 对 比 可 以 查看 图 11-8。 
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虽然 右边 的 图 片 看 起 来 并 没有 更 好 ,但 它 在 应 用 中 实际 上 渲染 正确 。 你 这 里 
看 到 的 缺陷 是 由 当前 预览 工具 实现 的 限制 所 造成 的 。 尽 管 在 PNG 文件 中 有 
透明 度 信息 ， 但 如 果 没 有 在 材质 上 设置 透明 度 值 ，Vizi 和 Three.js 都 无 法 知 
道 这 一 信息 。 因 为 这 些 值 在 模型 中 没有 设置 ， 所 以 我 们 需要 在 应 用 中 等 场景 
加 载 完 后 手动 设置 它们 。 



































图 11-8: 我 们 并 排比 较 两 张 图 ， 使 用 重 者 的 矩形 几何 来 描述 预览 工具 中 的 纹理 贴图 ， 左 边 是 使 用 之 
前 两 个 带 alpha 蒙 版 的 BMP 文件 的 效果 ， 右 边 是 使 用 一 个 PNG 文件 的 效果 ; 右边 树 周转 
的 白色 区 域 是 预览 工具 的 缺陷 , 当 我 们 在 应 用 代码 中 明确 告诉 Three.js 使 用 透明 度 的 时 候 ， 
它 就 会 消失 


11.3 ”使 用 skybox 创 建 一 个 3D 背 景 


既然 我 们 预览 和 调试 了 城市 模型 ， 并 且 已 经 知道 如 何 将 Futurgo 与 它 集成 ， 现 在 可 以 开始 
构建 应 用 了 。 但 首先 ， 我 们 需要 解决 另 一 个 问题 。 这 个 城市 模型 的 艺术 效果 确实 不 错 ， 但 
它 只 有 有 限 的 4 个 街区 。 如 果 我 们 想 要 一 个 迷人 的 、 真 实 的 场景 来 试 驾 Futurgo， 就 需要 
创造 一 个 更 大 城市 的 假象 。 我 们 可 以 通过 泻 染 一 个 skybox 背景 来 实现 。 





11.3.1 3D skybox 


和 典型 的 Web 页 面 背景 不 同 ， 我 们 的 场景 需要 3D 的 背景 : 当 相 机 移动 的 时 候 ， 我 们 期 望 
看 到 背景 变化 。skybox 是 一 个 全 景 图 ， 由 一 个 立方 体内 包 圳 的 六 个 纹理 图 组 成 。 立 方 体 是 
通过 一 个 固定 相机 旋转 这 染 出 来 的 ， 会 显示 出 背景 的 不 同 部 分 。skybox 是 一 种 提供 真实 
3D 背景 的 极其 简单 的 方法 。 


Three.js 的 示例 中 包含 几 个 skybox 功能 的 演示 。 打 开 Three.js 示例 文件 webgL_materials_ 
cubemap_balls_reflection.html 来 查看 运行 的 效果 。 这 个 例子 看 起 来 不 错 ， 但 是 因为 skybox 
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粗糙 的 实现 ， 它 有 一 些 限 制 。 在 所 有 这 些 例子 中 ， 作 者 在 场景 外 边缘 创建 了 一 个 非常 大 的 
立方 体 。 它 看 起 来 很 远 ， 但 如 果 你 在 场景 中 导航 ， 能 够 接近 其 中 某 个 边缘 ， 其 至 最 终 达 到 
它 ， 从 而 破坏 了 假象 。 























3D 图 形 中 的 一 切 都 是 假象 。skybox 创建 了 一 个 令 人 信服 的 无 限 的 背景 景 
假象 ， 只 要 你 永远 不 通过 移动 去 接近 它 。 如 果 你 看 过 Peter Weir 的 电影 《 楚 
门 的 世界 》， 回 想 一 下 楚 门 进 入 一 面 实体 墙 的 那个 场景 。 这 面 墙 是 节目 导演 
为 他 绘制 的 人 造 世界 背景 ， 一 旦 他 撞 上 那 面 墙 …… 谎 言 就 被 拆 穿 了 。 





11.3.2 Vizi skybox 对 象 


为 了 创建 一 个 令 人 信服 的 城市 场景 ,我们 需要 使 用 一 个 合适 的 skybox。 令 人 高 兴 的 是 ， 
Vizi 框架 中 自 带 了 一 个 。 在 将 skybox 放 进 城市 应 用 前 ， 我 们 先 创建 一 个 简单 的 例子 来 展示 
它 的 效果 。 打 开 示 例文 件 Chapter 11/skybox.html， 如 图 11-9 所 示 。 使 用 鼠标 旋转 来 查看 整 
个 背景 ,使 用 触摸 板 或 深 轮 来 放大 缩小 。 和 矩形 会 变 近 和 变 远 ,但 背景 始终 保持 无 限 远 的 距 
离 。 注 意 skybox 的 背景 还 反射 到 了 前 景 立方 体 的 表面 。 这 个 效果 是 通过 创建 一 个 具有 相同 
纹理 的 立方 体 环境 贴图 来 实现 的 。 






































11-9: 一 个 skybox 背景 , 前 景 是 立方 体 一 一 当 用 户 向 前 和 向 后 移动 的 时 候 , 立方 体会 变 近 和 变 远 ， 
但 背景 保持 无 限 远 的 距离 ， 立 方 体 上 使 用 同样 的 纹理 贴图 来 反射 背景 


skybox 的 全 景 图 图 片 由 六 个 位 图 组 成 ， 它 的 布局 显示 在 图 11-10 中 。 这 些 位 图 缝合 得 很 紧 
密 ， 使 得 映射 在 立方 体内 部 看 起 来 非常 完 
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图 11-10， 六 个 纹理 组 成 了 skybox 背景 的 立方 体贴 图 (skybox 纹理 来 自 http://www.3delyvisions. 
com/skf1.htm) 


例 11-7 展示 了 创建 skybox 并 添加 到 场景 中 的 代码 。 首 先 ， 我 们 使 用 Three.js 的 辅助 工具 
THREE.ImageUtils.loadTextureCube() 来 创建 一 个 立方 体 纹理 贴图 。 然 后 调用 一 个 Vizi 函 
数 来 创建 skybox 的 prefab (或 者 说 预 建 对 象 ) : Vizi.Prefabs.Skybox()。 最 后 设置 skybox 
的 纹理 (texture) 属性 为 立方 体 纹理 ， 并 将 它 添 加 到 应 用 中 。 


例 11-7: 创建 天 空 盒 (skybox) 背景 


var app = new Vizi.Application({ container : container }); 














// 天 空 盒 来 自 http://www.3deLyvistions.com/ 
// http://www.3delyvisions.com/skf1.htm 
var path = "../images/sky35/"; 


var urls = [ path + "rightcity.jpg", path + "leftcity.jpg", 
path + "topcity.jpg", path + "botcity.jpg", 
path + "frontcity.jpg", path + "backcity.jpg" ]; 
var cubeTexture = THREE.ImageUtiLs.LoadTextureCube( urls ); 
var skybox = Vizi.Prefabs.Skybox(); 
var skyboxScript = skybox.getComponent(Vizi.SkyboxScript); 


skyboxScript.texture = cubeTexture; 


app.addObject(skybox); 
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那么 ， 这 个 prefab 是 做 什么 的 呢 ? 


在 Vizi 中 ，prefab 是 一 组 内 置 的 对 象 和 组 件 ， 它 可 以 创建 并 部 署 到 场景 中 。 
prefab 这 种 设计 模式 在 类 似 Unity 这 样 的 游戏 引擎 中 经 常 出 现 。 现 代 游 戏 引 
擎 的 设计 趋势 已 经 从 通过 创建 类 来 扩展 功能 ， 转 向 了 聚集 简单 组 件 到 复杂 的 
结构 中 。 









































对 于 Vizi 的 skybox 来 说 ， 它 是 一 个 立方 体 ， 用 来 绘制 背景 ， 并 跟踪 主 相机 
的 移动 ， 来 保持 立方 体 的 正确 朝向 。 如 果 你 对 Vizi 中 skybox 的 prefab 是 如 
何 实现 的 感到 好 奇 ， 可 以 参考 Vizi 源码 中 的 objects/skybox.js 文件 。 








这 个 例子 中 的 立方 体 需要 反射 skybox 背景 图 。 通 过 使 用 相同 的 立方 体 纹理 贴图 来 作为 立方 
体 的 环境 贴图 ， 我 们 很 容易 就 实现 了 它 。 具 体 代码 如 例 11-8 中 所 示 。 


例 11-8: 添加 立方 体贴 图 到 前 景 对 象 中 


var cube = new Vizit.0bject; 


var visual = new Vizi.Visuyal( 
{ geometry: new THREE.CubeGeometry(2, 2, 2), 
material: new THREE.MeshPphongMaterial({ 

color :Oxffffff, 
envMap:cubeTexture, 
reflectivity:0.8, 
refractionRatio:0.1 
}) 

}); 


cube.addComponent(visual); 
app.addobject(cube ) ; 


11.4 集成 3D 内 容 到 应 用 中 


我 们 已 经 使 用 预览 工具 浏览 了 场景 图 ， 查 找到 了 对 象 的 名 称 和 属性 ， 并 查看 了 光源 及 其 
他 视觉 特性 。 我 们 也 清楚 了 当 模 型 加 载 到 应 用 后 需要 做 的 事情 。 我 们 还 学 习 了 如 何 构建 
skybox 背景 ， 以 及 在 场景 中 如 何 反射 它 到 对 象 上 。 现 在 ， 我 们 终于 准备 好 集成 3D 环境 到 
应 用 中 了 。 


11.4.1 加载 和 初始 化 场景 


Futurgo 试 驾 应 用 在 文件 Chapter 11/futurgoCity.html 中 。 其 中 的 jQuery-ready 代码 很 简单 ， 
它 创建 了 一 个 会 加 载 模型 、 组 装 场景 并 运行 应 用 的 FuturgoCity 类 的 实例 。FuturgoCity 的 
源码 可 以 在 文件 Chapter 11/futurgoCity.js 中 找到 。 

应 用 的 设置 代码 首先 加 载 城市 模型 。 之 后 文件 加 载 的 回调 函数 onLoadCompLete() 开始 组 装 
环境 。 查 看 例 11-9。 当 调用 查看 器 的 replaceScene() 方法 将 新 加 载 好 的 内 容 添加 到 场景 中 
后 ， 我 们 通过 调用 setCcontroller("FPS") 告诉 查看 器 使 用 第 一 人 称 导航 。( 我 们 将 在 本 章 
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后 面 详细 介绍 相机 控制 器 及 第 一 人 称 导航 。) 然后 保存 查看 器 的 相机 控制 器 及 当前 相 
信息 ， 供 后 面 使 用 。 最 后 ， 调 用 儿 个 辅助 函数 来 添加 skybox 和 环境 贴图 ， 并 完成 其 他 
的 设置 工作 。 


例 11-9: 环境 加 载 后 的 回调 代码 
FuturgoCity.prototype.onLoadComplete = function(data, loadStartTime) 


{ 





























var scene = data.scene; 
this.scene = data.scene; 
this.viewer.replaceScene(data); 


if (this.loadCallback) { 
var LoadTime = (Date.now() - LoadStartTime) / 1000; 
this.LoadCaLLback(LoadTime ) ; 

} 


this.viewer.setController("FPS"); 
this.cameraController = this.viewer.controllerScript; 
this.walkCamera = this.viewer.defaultCamera; 


this.addBackground(); 
this.addCollisionBox(); 
this.fixTrees(); 
this. setupCamera(); 
this. LoadFuturgo(); 

} 





机 的 
重要 





Ln 


addBackground() 使 用 与 前 一 节 的 例子 一 样 的 方式 创建 skybox， 然 后 添加 环境 贴图 到 建筑 
上 。 我 们 已 经 使 用 预览 工具 查找 过 建筑 的 名 称 ， 它 们 都 以 字符 串 “Tower” 或 “Office” 开 
头 。 注 意 粗 体 标 出 的 那 一 行 正则 表达 式 。 我 们 使 用 Vizi 场景 图 的 map() 方法 来 查找 匹配 的 








对 象 ， 然 后 设置 每 个 对 象 上 Three.js 材质 的 环境 贴图 。 


this.scene.map(/Tower.*|0ffice.*/，function(o) { 





var visuyals = o.visuals; 
if (visuals) { 
for (var vi = 0; vi < visuals.length; vi++) { 
var v = visuyals[vi]; 
var material = v.material; 
if (material) { 
if (material instanceof THREE.MeshFaceMaterial) { 
var materials = material.materials; 
var mi, len = materials.length; 
for (mi = 0; mi < len; mi++) { 
addEnvMap(materiaLs[mi]); 


} 
} 
else { 
addEnvMap(material); 
} 


}); 
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接 下 来 ， 我 们 要 添加 一 个 碰撞 盒 。 在 本 章 后 面 ， 我 们 将 会 看 到 如 何 实现 碰撞 检测 ， 来 支持 
以 第 一 人 称 模式 在 场景 中 导航 。 现 在 ， 这 里 的 代码 是 在 城市 的 边界 设置 一 个 不 可 见 的 盒 
子 ， 使 得 我 们 不 能 超出 这 些 限制 。 它 非常 简单 : 创建 一 个 新 的 Vizi.Visual 对 象 ， 其 中 包 
含 一 个 立方 体 ， 尺 寸 为 场景 的 边界 框 ， 并 通过 设置 其 材质 的 opacity 属性 为 0 来 保证 它 是 
透明 的 。 除 此 之 外 ， 我 们 还 需要 保证 碰撞 发 生 在 立方 体内 部 。 我 们 通过 设置 立方 体 的 side 
属性 为 枚 举 值 THREE.Doubleside ( 即 演 染 立方 体 的 两 面 )， 来 告诉 Three.js 泻 染 立方 体 的 背 
在。 代码 如 例 11-10 所 示 。 


例 11-10: 添加 一 个 磁 撞 盒 到 场景 中 


FuturgoCity.prototype.addCollisionBox = function() { 






































var bbox = Vizi.SceneUtils.computeBoundingBox(this.scene); 


var box = new Vizi.0bject; 
box.name = "_futurgoCollisionBox"; 


var geometry = new THREE.CubeGeometry(bbox.max.x - bbox.min.x, 
bbox.max.y - bbox.min.y, 
bbox.max.z - bbox.min.z); 


var material = new THREE.MeshBasicMaterial({ 
transparent:true, 
opacity:0, 
side:THREE.DoubleSide 
]); 


var VisuaL = new Vizi.Visual({ 
geometry : geometry, 
material : material}); 


box.addComponent(visual); 


this .viewer .addObject(box); 


} 
我 们 需要 解决 树 的 透明 度 问 题 。 在 fixTrees() 方法 中 ， 我 们 再 次 使 用 map() 来 查找 名 称 以 
“Tree” 开 头 的 节点 ， 然 后 找到 它 所 包含 的 视觉 元 素 ， 设 置 它们 材质 属性 中 的 transparent 
属性 为 true。 这 个 标记 告诉 Three.js 的 泻 染 系统 开启 alpha 混合 。 如 果 没 有 它 ， 树 就 会 不 
透明 ， 如 图 11-8 中 在 预览 工具 中 看 到 的 那样 。 


this.scene.map(/^Tree.*/, function(o) { 





tt 














o.map(Vizi.Visual, function(v){ 
var material = v.material; 
if (material instanceof THREE.MeshFaceMaterial) { 
var materials = material.materials; 
var i, len = materials. length; 
for (i = 0; i < len; i++) { 
material = materials[i]; 
material.transparent = true; 
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else { 
material.transparent = true; 


} 


}); 
}); 


在 将 相机 放 到 合适 的 位 置 来 进行 初始 查看 后 ， 我 们 就 可 以 进行 设置 应 用 中 最 后 一 个 大 的 步 
又 加 载 车 模型 。 


11.4.2 ”加 载 和 初始 化 车 模型 


加 载 和 准备 车 模型 包含 儿 个 步骤 : 添加 加 载 好 的 模型 到 场景 中 ， 添 加 淡出 车 窗 到 不 同 透 明 
度 的 行为 ， 添 加 环境 贴图 到 车 窗 和 车 身 中 来 反射 skybox， 去 掉 在 预览 工具 中 看 到 的 额外 光 
源 ， 最 后 放置 好 车 。 这 些 都 做 完 后 ， 我 们 还 需要 设置 开车 和 相关 动画 的 交互 式 对 象 ， 随 后 


会 介绍 。 


文件 加 载 的 回调 函数 以 如 下 的 方式 执行 。 调 用 this.viewer.addToScene() 来 添加 对 象 到 场 
景 中 。 然 后 ， 和 前 一 章 一 样 ， 我 们 添加 车 窗 的 渐变 行为 ， 并 自动 开始 ， 使 得 它 两 秒 后 将 变 
为 半 透 明 。 另 外 ， 我 们 将 渐变 的 对 象 保存 在 应 用 的 faders 属性 中 。 它 是 一 个 数组 ， 我 们 
将 在 后 面 使 用 它 来 渐变 车 窗 ， 在 进入 车 的 时 候 变 得 更 透明 ， 在 离开 车 的 时 候 变 回 半 透明 。 
我 们 在 遍历 车 窗 材质 的 时 候 ， 还 添加 了 建筑 所 使 用 的 相同 的 环境 贴图 ， 也 就 是 摩天 大 楼 的 
skybox 背景 立方 体 纹理 。 例 11-11 展示 了 这 些 调用 。 


例 11-11: 处 理 加 载 Futurgo 车 的 回调 代码 


FuturgoCity.prototype.onFuturgoLoadComplete = function(data) { 






















































































// 将 Futurgo 模 型 添加 到 场景 中 
this.viewer.addToScene(data); 
var futurgoScene = data.scene; 





// 添加 交互 和 行为 


var that = this; 


// 将 环境 贴图 和 淡出 器 添加 到 窗口 中 ,在 开始 阶段 将 窗口 淡出 
this.faders = []; 
futurgoScene.map(/windows_front|windows_rear/, function(o) { 














var fader = new Vizi.FadeBehavior({duration:2, 
opacity:FuturgoCity.OPACITY_SEMI_OPAQUE}); 

0.addComponent(fader ); 

fader.start(); 

that.faders.push(fader); 


var visuyals = o.visuals; 

var i, len = visuals.length; 

for (i = 0; i < len; i++) { 
visuals[i].material.envMap = that.envMap; 
visuals[i].material.reflectivity = 0.1; 
visuals[i].material.refractionRatio = 0.1; 
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}); 
然后 我 们 将 环境 贴图 添加 到 车 身 (金属 框架 和 后 视 镜 ) 上 。 


// 给 车 身 添 加 环境 贴图 
futurgoScene.map(/body2/, function(o) { 
var VisuaLs = o.visuals; 
var i, len = visuals.length; 
for (i = 0; i < len; i++) { 
visuals[i].material.envMap = that.envMap; 
visuals[i].material.reflectivity = 0.1; 
visuals[i].material.refractionRatio = 0.1; 








中 7 


接 下 来 ,我 们 遍历 车 身 的 每 一 个 部 分 来 添加 Vizi.Picker 对 象 。 它 将 允许 我 们 点 击 Futurgo 
的 任意 位 置 来 开始 试 罗 。 我 们 将 它 保存 到 对 象 的 pickers 数组 中 ， 因 为 我 们 将 会 在 每 次 进 
入 和 离开 车 的 时 候 分 别 禁用 和 重新 开局 picker。 


再 接 下 来 ， 我 们 处 理 在 预览 工具 中 Futurgo 模型 导入 到 场景 后 看 到 的 光源 问题 。Futurgo 模 
型 中 额外 的 光源 和 场景 中 的 光源 受 加 ， 导 致 模型 看 起 来 很 色 了 。 所 以 我 们 需要 关 掉 Futurgo 
模型 中 自 带 的 所 有 光源 。 另 外 ， 还 需要 关闭 城市 模型 中 提供 的 环境 光 。 
// 来 自 两 个 场景 的 光 同 时 作用 
// 使 得 车 模型 看 起 来 过 于 苍白 
// 关 掉 车 模型 中 自 带 的 所 有 光源 
futurgoScene.map(Vizi.PointLight, function(light) { 
light.intensity = 0; 
]); 





























// 还 需要 关闭 城市 模型 中 提供 的 环境 光 

this.scene.map(/ambient/, function(o) { 
o.light.color.set(0, 0, 0); 

]); 


最 后 ， 我 们 将 车 放置 到 一 个 合适 的 初始 位 置 ， 作 为 我 们 进入 场景 时 候 的 视图 。 
x 和 z 位 置 值 都 是 零 ， 所 以 我 们 将 车 放 在 它 的 右 后 方 。 
// 将 车 放置 到 一 个 合适 的 初始 位 置 
var futurgo = futurgoScene.findNode("vizi_ mobile"); 
futurgo.transform.position.set(2.33, 0, -6); 


我 们 还 需要 添加 一 些 行为 和 交互 来 开车 ， 本 章 末尾 部 分 将 对 此 进行 介绍 。 不 过 话说 回来 ， 
现在 场景 已 经 完全 组 装 好 了 。 你 可 以 看 到 skybox 背景 及 环境 贴图 的 反射 ， 车 已 经 放 好 位 置 
了 ， 它 的 车 窗 半 透 明 ， 而且 背 景 的 环境 贴图 反射 到 车 身上 。 页 面 加 载 完 后 的 进入 视图 如 图 
11-11 所 示 。 





团 





为 相机 的 
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图 11-11: Futurgo 城市 应 用 的 进入 视图 


让 我 们 花 些 时 间 来 观察 。 拖 搜 鼠 标 来 查看 四 周 ， 使 用 方向 键 来 在 场景 中 移动 。 看 看 建筑 高 
答 而 立 ， 反 射 着 黄昏 的 天 空 。 我 们 只 用 了 几 天 就 创建 好 它 了 ， 这 可 真是 了 不 起 的 成 就 。 


好 ， 困 得 结束 了 ， 我 们 继续 工作 。 


11.5 ”实现 第 一 人 称 导 上航 


现在 我 们 加 载 好 环境 了 ， 我 们 需要 在 其 中 移动 。 我 们 想 要 允许 用 户 步 行 浏览 城市 ， 或 者 试 
驾 Futurgo。 在 本 节 中 ， 我 们 将 讨论 如 何 实现 游戏 风格 的 导航 ， 也 称 为 第 一 人 称 导 航 (first- 


person navigation ) 。 


第 一 人 称 (或 第 一 人 称 视角 ) 这 个 术语 ， 指 的 是 从 用 户 的 视角 来 演 染 3D 场景 。 本 质 上 来 
说 就 是 将 相机 放 在 好 似 用 户 双 有 眼 间 的 位 置 。 第 一 人 称 导 航 是 一 种 移动 相机 的 模式 ， 相 机 根 
据 鼠 标 、 键 盘 、 手 柄 等 游戏 输入 设备 进行 响应 。 第 一 人 称 导航 在 电子 游戏 中 非常 流行 ， 尤 
其 是 第 一 人 称 射 击 (First-Person Shooter，FPS) 这 样 的 对 战 游戏 。 


在 桌面 电脑 上 ， 第 一 人 称 导 航 通常 由 鼠标 和 键盘 操作 ， 鼠 标 用 于 控制 相机 指向 的 方向 ， 键 
盘 用 于 用 户 的 移动 、 请 行 或 旋转 。 表 11-1 展示 了 第 一 人 称 导航 中 典型 的 键盘 和 鼠标 绑 
定 。 方 向 键 用 于 视图 的 左右 移动 及 前 进 后 退 , 还 有 W、A、S 和 DD 键 (统称 “WASD” 或 
“wazz-dee” 键 ) 也 实现 同样 的 功能 ， 用 户 能 左手 进行 移动 ， 同 时 右手 使 用 鼠标 旋转 相机 
(或 者 在 射击 游戏 中 射击 敌人 )。 








开发 一 个 3D 环 境 | 255 


表 11-1: 第 一 人 称 模式 的 典型 键盘 和 鼠标 绑 定 




















键盘 /鼠标 行为 功 能 
W、 上 第 头 前 进 

A、 左 箭头 向 左 移动 
S、 下 第 头 后 退 

D、 右 箭头 向 后 移动 
鼠标 拖 上 相机 向 上 
鼠标 拖 下 相机 向 下 
鼠标 拖 左 相机 向 左 
鼠标 拖 右 相机 向 右 


使 用 方向 键 或 WASD 键 在 城市 场景 中 浏览 ， 拖 搜 照 标 左 键 来 查看 上 下 左右 ， 如 图 11-12 
所 示 。 








| ET 


加 wecu up and tr Wms od Tesne a Consneeos ming ve wendo Bl wo 
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Use arrow or WASD heys to wauc drag mouse to look upydown 








11-12: 以 第 一 人 称 模式 浏览 场景 


11.5.1 相机 控制 器 


为 了 实现 第 一 人 称 导航 ， 我 们 将 使 用 相机 控制 器 (camera controller) 对 象 。 相 机 控制 器 ， 
正如 其 名 ， 基 于 用 户 输入 来 控制 相机 的 移动 。Vizi.Viewer 支持 不 同 的 相机 控制 器 模式 : 
模型 (model) 及 第 一 人 称 (first-person)， 它 会 自动 为 每 个 模式 创建 相机 控制 器 对 象 。 只 
需要 调用 查看 器 的 setCcontroller() 方法 ， 它 接收 一 个 字符 串 来 标识 使 用 哪个 控制 器 ， 目 
前 支持 的 值 是 "model" 和 "FPS"。 


第 10 章 中 的 Futurgo 应 用 使 用 了 模型 相机 控制 器 ， 设 计 用 于 围绕 物体 旋转 相机 ， 一 直 朝 向 
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物体 的 中 心 。 它 的 效果 是 当 你 拖 搜 鼠标 的 时 候 ， 模 型 看 起 会 跟着 旋转 ， 或 者 当 你 使 用 触摸 


板 或 演 轮 的 上 时候， 模型 会 变 得 近 点 或 远 点 


一 、 








事实 上 只 有 相机 在 动 )。 这 种 类 型 的 相机 控制 





器 最 适合 只 使 用 一 个 模型 的 应 用 。 对 于 城市 应 用 ， 我 们 将 使 用 第 一 人 称 控制 器 。 


11.5.2 第 一 人 称 控制 器 中 的 数学 


实现 第 一 人 称 控制 器 的 关键 是 将 鼠标 的 位 置 变化 转换 成 相机 的 旋转 : 向 左 向 右 拖 搜 会 让 相 


机 绕 着 y 轴 旋 转 ， 向 上 向 下 拖 搜 则 绕 着 它 的 x 轴 旋 转 。 
朝向 : 按 下 向 上 第 头 键 ， 相 机 会 沿 着 视线 向 前 移动 。 





基于 键盘 的 移动 通常 会 遵照 相机 的 


为 了 切身 体会 开发 第 一 人 称 控制 器 所 需 的 数学 ， 让 我 们 看 看 Vizi 实现 中 的 部 分 代码 。 


Vizi.FirstPersonControls 中 的 update() 方法 会 在 每 次 
yy 轴 旋 转 的 总 量 。 请 看 例 11-12 中 所 列 出 的 代码 。 


例 11-12: Vizi.FirstPersonControls 的 代码 
if (this.mouseDragOn || this.mouseLook) { 











运行 循环 中 被 调用 ， 它 计算 绕 x 及 


var deltax = this.lastMouseX - this.mouseX; 


var dlon = deltax / this.viewHalfX * 900; 
this. lon += dlon * this.lookSpeed; 


var deltay = this.lastMouseY - this.mouseY; 


var dlat = deltay / this.viewHaLfY * 900; 
this.lat += dlat * this.LookSpeed; 


this.theta = THREE.Math.degToRad( this.lo 


this. Lat 
this. phi 


= Math.max( - 85, Math.min( 85, 

= THREE.Math.degToRad( this.lat 

var targetPosition = this.target, 
position = this.object.position; 


targetPosition.x = position.x - Math.sin( 
targetPosition.y = position.y + Math.sin( 
targetPosition.z = position.z - Math.cos( 


this.object. LookAt( targetPosition ); 


this. LastMouseX 
this. lastMouseY 


this.mouseX; 
this.mouseY; 


} 


n ); 


this.lat ) ); 
Db 


this. theta ); 
this.phi ); 
this. theta ); 


首先 ， 我 们 计算 鼠标 x 和 yy 位置 相 对 于 之 前 的 变化 ， 然 后 将 它 转 换 成 旋转 增 量 (rotational 








delta) ， 作 为 经 度 和 纬度 的 变化 度 。 局 部 变量 dlon 用 于 
式 来 计算 它 : 


表示 经 度 的 变化 ， 我 们 使 用 如 下 公 


var dlon = deltax / this.viewHalfX * 900; 


我 们 用 鼠标 x 位 置 的 变化 除 以 场景 宽度 的 一 半 ， 来 得 到 鼠标 移动 的 大 小 占 屏 幕 的 百分比 。 


每 10% 的 屏幕 宽度 等 于 90 度 旋转 (因此 乘 以 900) 。 然 








后 ， 我 们 将 这 个 增 量 加 到 当前 经 度 
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(水 平 ) 的 旋转 上 : 
this.Lon += dlon * this.TlookSpeed; 


经 度 旋转 的 角度 然后 转换 成 Three.js 中 使 用 的 弧度 (radian)， 并 保存 到 this.theta 属 
性 中 : 











this .theta = THREE.Math.degToRad( this.Lon ); 


我 们 以 相同 的 方式 使 用 鼠标 y 位 置 的 变化 计算 纬度 〈 垂 直 旋 转 ) 的 旋转 ， 并 保存 到 this. 
phi 中 。 现 在 我 们 有 了 新 的 经 纬度 值 ， 可 以 旋转 视图 了 。 我 们 通过 计算 出 “查看 ”的 位 置 
来 实现 ， 这 个 位 置 是 在 以 相机 为 原点 的 一 个 单位 球体 上 ， 然 后 使 用 相机 的 LookAt( ) 方法 让 
Three;js 的 相机 朝向 那里 。 现 在 ， 相 机 已 经 朝 着 一 个 新 的 方向 了 。 

targetPosition.x = position.x - Math.sin( this.theta ); 
targetPosition.y = position.y + Math.sin( this.phi ); 


targetPosition.z = position.z - Math.cos( this.theta ); 
this.object. LookAt( targetPosition ); 


相机 随 着 视线 进行 移动 。 如 果 用 户 按 下 任意 导航 键 ， 我 们 设置 相应 的 布尔 值 属性 
moveForward、moveBackward、moveLeft 和 moveRight 来 标识 它 ， 并 在 update() 中 进行 
检查 。 


this.update = function( delta ) { 
































this.startY = this.object.position.y; 
var actuaLMoveSpeed = delta * this.movementSpeed; 


if ( this.moveForward ) 

this.object.transLateZ( - actuaLMoveSpeed ); 
if ( this.moveBackward ) 

this.object.transLateZ( actualMoveSpeed ); 


if ( this.moveLeft ) 

this.object.translateX( - actualMoveSpeed ); 
if ( this.moveRight ) 

this.object.translateX( actualMoveSpeed ); 


this.object.position.y = this.starty; 


我 们 使 用 Threejs 来 帮助 我 们 计算 相机 的 新 位 置 。translatez() 和 translateX() 方法 分 别 
绕 相应 的 轴 进 行 移 动 。 因 为 相机 或 许 会 在 水 平方 向 指向 上 或 下 ， 这 将 导致 沿 着 y 轴 上 移 
动 。 我 们 不 希望 这 样 ， 我 们 希望 一 直 保 持 在 地 上 。 所 以 我 们 使 用 之 前 保存 的 值 ， 来 覆盖 y 
位 置 上 的 任何 修改 。 


11.5.3 ”鼠标 视角 
在 这 个 应 用 中 ， 用 户 需 要 点 击 和 拖 搜 鼠标 来 旋转 相机 视图 。 相 机 控制 器 在 许多 第 一 人 称 


游戏 中 会 随 着 鼠标 的 移动 来 旋转 视图 ， 而 不 需要 点 击 。 这 个 模式 通常 被 称 为 鼠标 视角 
(mouse look)。 它 对 于 全 屏 第 一 人 称 游 戏 来 说 非常 方便 ， 因 为 它 更 快 和 更 省 力 。 它 还 腾 出 
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了 鼠标 点 击 / 放 开 行为 ， 可 以 用 于 射击 或 打开 库存 页 (inventory page)。 


但 是 对 于 在 窗口 中 的 Web 导航 ， 鼠 标 视角 则 是 一 个 灾难 。 用 户 可 能 想 移动 鼠标 去 点 击 浏览 
器 的 地 址 栏 或 标签 ， 或 者 点 击 页 面 2D 界面 的 元 素 。 但 所 有 这 些 党 试 都 会 在 3D 窗口 中 旋 
转 相 机 视图 ， 使 得 在 用 户 试图 做 任何 事情 的 时 候 相 机 都 会 “ 飞 来 飞 去 ”， 这 并 不 好 玩 。 如 
有 果 你 想 尝 试 一 下 ， 可 以 在 这 个 应 用 中 设置 控制 器 的 mouseLook 属性 为 true， 感 受 一 下 有 多 
么 令 人 钥 走 。 在 我 看 来 ， 鼠 标 视图 只 适合 全 屏 使 用 。 


鼠标 视图 还 可 以 像 许 多 第 一 人 称 游戏 中 那样 隐藏 鼠标 指针 。 新 的 浏览 器 也 支 
持 这 个 功能 ， 被 称 为 指针 锁定 (pointer lock) API 和 鼠标 锁定 (mouse lock) 
API。 这 个 功能 的 官方 W3C 推荐 规范 可 以 在 网 上 找到 (https://dvcs.w3.org/ 
hg/pointerlock/raw-file/tip/index.html)。 我 还 推荐 一 篇 由 Google 工程 师 John 
McCutcheon 写 的 关于 这 个 话题 的 优秀 文章 (http://www.html5rocks.com/en/ 


tutorials/pointerlock/intro/) 。 










































































11.5.4 ”简单 碰撞 检测 


一 个 维持 真实 环境 幻觉 的 重要 特性 是 碰撞 检测 : 检测 用 户 视图 (或 任意 其 他 对 象 ) 碰撞 到 
场景 中 的 几何 体 ， 并 防止 对 象 穿 过 几何 体 。 如 果 用 户 可 以 穿 过 墙 ， 就 不 能 做 到 令 人 信服 的 
虚拟 城市 了 。 


在 本 节 中 ， 我 们 将 会 学 习 如 何 实现 一 个 非常 简单 的 碰撞 检测 ， 用 于 Futurgo 城市 环境 中 。 
它 使 用 Three.js math 对 象 来 从 视点 投射 出 一 条 光线 ， 查 找 在 视线 上 的 任意 对 象 。 如 果 在 某 
一 特定 距离 内 有 任意 对 象 存在 ， 就 认为 存在 碰撞 ， 并 禁止 我 们 在 那个 方向 上 移动 。 


类 Vizi.FirstPersonControLLerScript 是 实现 Vizi 第 一 人 称 导 航 系 统 的 prefab 组 
件 。 例 11-13 展示 了 部 分 代码 。 首 先 ， 保 存 原先 的 相机 位 置 。 然 后 ， 让 Vizi.FirstPer 
sonControllerscript 根据 鼠标 和 键盘 输入 更 新 相机 位 置 。 接 着 ， 调 用 辅助 方法 
testCollision() 来 检测 在 已 保存 的 位 置 和 新 位 置 之 间 的 移动 是 否 会 产生 碰撞 。 如 果 有 碰 
撞 ， 我 们 将 相机 恢复 到 之 前 的 位 置 ， 并 触发 一 个 "coLLide" 事件 给 监听 的 国 数 。( 相 信 我 ， 
有 函数 会 监听 ， 稍 后 会 介绍 。) 


例 11-13: 第 一 人 称 控制 器 脚本 中 的 碰撞 检测 代码 
Vizi.FirstPersonControllerScript.prototype.update = function() 


{ 






































this.saveCamera(); 

this.controls.update(this.clock.getDelta()); 

var collide = this.testCollision(); 

if (collide && collide.object) { 
this.restoreCamera( ) ; 
this.dispatchEvent("collide", collide); 


} 
现在 让 我 们 来 看 看 testCollision() 方 法。 回忆 一 下 第 9 章 介 绍 过 的 Vizi.Picker 选取 代 
码 。Vizi 图 形 系统 使 用 Three.js 的 光线 投射 来 查找 从 视点 到 几何 体 之 间 的 相交 点 。 如 果 有 
一 个 光线 线段 在 最 小 距离 1 及 最 大 距离 2 内 ， 就 表明 有 对 象 相 交 ， 相 应 的 一 个 对 象 将 被 返 
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回 ， 并 保存 到 coLLide 变量 中 。 


Vizi.FirstPersonControllerScript.prototype.testCollision = function() { 


this.movementVector .copy(this._camera.position).sub(this.savedCameraPos); 
if (this.movementVector.length()) { 


var collide = Vizi.Graphics.instance.objectFromRay(null, 
this.savedCamerapPos ， 
this.movementVector, 1, 2); 


if (collide && collide.object) { 
var dist = this.savedCameraPos.distanceTo(collide.hitpointWorld); 


} 


return collide; 


} 


return null; 


以 上 的 算法 是 最 简单 的 碰撞 检测 方法 。 我 们 使 用 相机 位 置 来 在 查看 的 方向 上 
投射 一 条 光线 。 因 为 它 是 一 条 光线 ， 没 有 体积 ， 无 限 薄 ， 所 以 这 不 够 真实 。 
真实 的 化 身 (avatar) 会 有 曲线 或 者 至 少 有 体积 。 一 个 更 严格 的 实现 需要 分 
别 检测 立方 体 与 球体 、 圆 柱 体 或 其 他 几何 体 的 碰撞 。 这 正 是 大 多 数 引擎 的 做 
法 ， 但 对 于 我 们 的 目的 ， 基 于 光线 的 碰撞 检测 足以 避免 我 们 穿 过 墙壁 。 


























11.6 使 用 多 个 相机 


3D 的 一 个 好 处 是 可 以 使 用 多 个 相机 ， 因 而 我 们 可 以 使 用 不 同 的 视角 (viewing angle) 和 高 
宽 比 (aspect ratio)， 从 不 同 的 观察 点 来 泻 染 场景 。 我 们 可 以 一 直 使 用 一 个 相机 来 完成 这 一 
工作 ， 并 在 需要 的 时 候 动 态 修改 它 的 属性 。 但 是 ，Three.js 可 以 轻松 创建 多 个 相机 ， 并 让 
它们 随时 待命 。Vizi 框架 将 Three.js 的 相机 封装 进 了 组 件 ， 它 还 管理 着 对 它们 的 切换 ， 以 
及 处 理 其 他 底层 的 工作 ， 比 如 当 泻 染 窗 口 大 小 改变 时 自动 更 新 高 宽 比 。 我 们 将 在 Futurgo 
城市 体验 中 利用 这 些 功能 ， 创 建 第 二 个 相机 并 放置 在 车 内 。 图 11-13 展示 了 使 用 这 个 相机 
从 Futurgo 内 部 进行 观察 的 视图 。 
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图 11-13: 从 Futurgo 汽车 内 部 的 相机 查看 场景 的 视图 


例 11-14 展示 了 创建 第 二 个 相机 的 代码 。 首 先 ， 我们 创建 一 个 新 的 Vizi 对 象 driveCam， 用 
于 包含 相机 组 件 。driveCan 将 会 被 添加 为 Futurgo 车 的 子 节点 。 为 什么 这 样 做 ?” 它 的 好 处 
是 当 车 移动 (我们 将 在 后 面 介绍 ) 的 时 候 ， 相 机 会 跟着 移动 。 回 忆 一 下 我 们 在 之 前 章节 中 
对 变换 层级 的 讨论 : 一 个 对 象 的 变换 属性 〈 位 置 、 旋 转 及 缩放 ) 会 影响 它 子 节点 的 变换 。 
当 车 移动 或 转动 的 时 候 ， 相 机 会 跟着 变换 。 

接 下 来 ， 我 们 将 相机 放 到 车 内 。 将 相机 添加 为 Futurgo 的 子 节点 会 默认 放置 在 车 的 原点 。 
在 这 个 例子 中 ， 相 机 会 在 地 上 。 所 以 我 们 需要 将 它 放 置 合适 。 不 过 ， 我 们 还 需要 处 理 一 些 
琐事 ， 因 为 当 TC 构建 Futurgo 模型 时 ， 内 部 包含 了 缩放 值 。( 我 通过 加 载 模型 到 预览 工具 
中 ， 并 检查 顶层 组 的 缩放 值 进行 了 确认 。) 我 没有 让 TC 重新 改变 模型 尺寸 ， 而 是 简单 地 通 
过 除 以 每 个 维度 的 缩放 值 ， 来 调整 相机 的 位 置 。 结 果 相 机 被 放置 在 了 大 概 六 英尺 ( 约 1.8 
米 ) 高 司机 坐 下 后 视 平 线 (eye level) 的 位 置 ， 如 图 11-13 所 示 。 


例 11-14: 创建 开车 相机 
// 在 车 内 放置 一 个 相机 


var driveCam = new Vizi.0bject; 

var camera = new Vizi.PerspectiveCamera; 
Camera.near = 0.01; 
driveCam.addComponent(camera); 
futurgo.addChild(driveCam); 

// 计算 模型 的 拉 伸 值 

// 以 便 我 们 将 相机 摆 放 在 合适 的 位 置 

var scaley = futurgo.transform.scale.y; 

var scalez = futurgo.transform.scale.z; 

var camy = FuturgoCity.AVATAR_HEIGHT_SEATED / scaley; 
var camz = 0 / scalez; 
driveCam.transform.position.set(0, camy, camz); 
this.driveCamera = camera; 
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在 下 一 节 中 ， 我 将 介绍 如 何 切换 到 这 个 相机 ， 作 为 在 开始 和 结束 试 驾 模 式 的 时 候 进入 和 离 
开 Futurgo 车 的 过 渡 动画 的 一 部 分 。 


a = 
11.7 创建 定时 的 动画 过 渡 
我 们 快要 能 够 开始 试 驾 了 。 使 用 鼠标 点 击 Futurgo， 或 点 击 左边 的 “Start Test Drive” 标 签 ， 
会 让 我 们 进入 驾驶 室 ， 从 而 可 以 开始 驾驶 。 为 了 让 进入 车 内 的 过 程 变 得 有 趣 并 有 几 分 真实 的 
体验 ， 我 们 将 组 合 使 用 Vizi 组 件 及 基于 setTimeout() 的 计时 器 来 编写 一 系列 过 渡 和 动画 。 
例 11-15 中 的 代码 以 及 后 续 的 代码 片段 ， 按 照 如 下 步 又 实现 功能 。 


() 禁用 从 车 内 进行 选取 。 我 们 不 希望 点 击 鼠标 触发 不 想 要 的 动画 效果 。 

(2) 通过 车 窗 打 开动 画 来 打开 驾驶 室 。 

(3) 当 车 窗 打 开动 画 结束 后 ， 进 入 车 内 。 

(4) 一 旦 进入 车 内 ,关闭 车 窗 ， 并 将 它们 渐变 为 全 透明 ， 使 得 我 们 可 以 看 到 外 面 。 同 时 ， 减 
弱 城 市 背景 音 。 最 后 ， 启 用 车 辆 驾驶 脚本 。 

在 执行 完 前 面 的 操作 后 ， 我 们 将 会 在 车 内 并 准备 开始 驾驶 了 。 下 面 我 们 来 具体 学 习 每 个 步 

又 的 代码 。 


首先 ， 我们 禁用 选取 ， 并 开始 车 窗 打开 动画 。 
例 11-15: 进入 车 内 和 开始 试 驾 的 过 渡 动 画 


FuturgoCity.prototype.startTestDrive = function(event) { 







































































if (this.testDriveRunning) 
return; 


this.testDriveRunning = true; 


// 在 车 体内 部 禁用 选择 器 

var i, len = this.pickers.Length; 

for (i = 0; i < len; i++) { 
this.pickers[i].enabled = false; 











} 


// 打开 车 窗 
this.playOpenAnimations(); 
在 一 秒 延 迟 后 ， 我 们 进行 下 一 步 操 作 : 切换 到 driveCamera 视图 。 为 此 需要 设置 相机 的 
active 属性 为 true (在 内 部 实现 中 ， 会 告诉 Vizi 使 用 这 个 新 的 相机 来 演 染 )。 我 们 还 通过 
设置 nove 属性 为 false 来 禁用 第 一 人 称 相机 控制 器 移动 的 能 力 。 我 们 还 想 查 看 四 周 ， 所 以 
继续 使 用 第 一 人 称 控 制 妖 : 在 车 内 ， 我 们 将 能 使 用 鼠标 来 倾斜 和 转动 相机 方向 。 
// 在 打开 车 厢 后 切换 到 车 内 相机 
// 并 在 一 段 短 和 暂 的 延迟 后 开启 控制 器 以 供 试 驾 
var that = this; 
setTimeout(function() { 























// 切换 到 车 内 相机 
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}, 1 


that.cameraController.camera = that.driveCamera; 
// 我 们 需要 停留 在 车 内 ,因此 不 要 移动 相机 
that.cameraControLLer .move = false; 
that.driveCamera.rotation.set(0, 0, 0); 
that.driveCamera.active = true; 








000); 





现在 我 们 坐 在 车 内 ， 看 着 外 面 的 世界 。 接 下 来 让 我 们 在 一 秒 后 触发 一 个 过 渡 序 列 来 关上 车 
窗 。 我 们 播放 动画 来 关闭 车 窗 。 我 们 还 调 小 车 外 的 声音 (本 章 后 面 会 讨论 如 何 添加 声音 到 
应 用 中 )。 我 们 将 车 窗 渐 变 到 几乎 完全 透明 ， 以 便 在 驾驶 室内 可 以 看 到 外 面 。 最 后 ， 激 活 
驾驶 车 辆 和 仪表 盘 的 动画 脚本 。 现 在 我 们 准备 好 试 驾 了 。 

// 现在 我 们 在 车 里 ,启用 车 控制 器 

// 同时 关闭 车 窗 并 将 其 淡出 至 接近 透明 

// 使 得 我 们 可 以 看 到 车 窗外 的 城市 





SetT 


3 这 


























imeout(function() { 


// 关闭 车 窗 


that.playCloseAnimations(); 











// 实现 城市 背景 音 的 隔音 效果 
that. sound. interior(); 


// 全 部 车 窗 淡 出 
var i, len = that.faders. length; 
for (i = 0; i < len; i+t+) { 
var fader = that.faders[i]; 
fader .opacity = FuturgoCity.OPACITY_MOSTLY_TRANSPARENT; 
fader .start(); 


} 
// 启用 车 脚本 控制 器 和 仪表 盘 动 画 


that.carController .enabLed = true; 
that.dashboardScript.enabled = true; 











000); 


退出 试 过 模式 的 代码 在 endTestDrive() 方法 中 ， 在 这 里 我 们 并 没有 进行 展示 。 本 质 上 它 是 
反 向 进行 前 面 开始 试 芍 的 步 又 。 


(D) 禁用 车 脚本 。 


(2) 打开 车 窗 。 


(3) 重新 开局 选取 ， 将 相机 切换 至 外 部 视 医 








圈 
下 





新 激活 相机 控制 器 的 移动 模式 ， 恢 复 外 部 

















声音 为 正常 音量 ， 将 车 窗 渐 变 回 半 透明 。 


(4) 关闭 车 窗 。 


11.8 ”对 和 象 行为 脚本 


现在 是 时 候 让 车 移动 了 。 为 此 ， 我 们 需要 编写 一 个 控制 器 ， 它 类 似 于 在 场景 中 浏览 的 第 
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一 人 称 控制 器 。 在 这 里 ， 键 盘 移动 和 选择 的 是 小 车 而 不 是 相机 。( 我 们 希望 能 用 鼠标 倾斜 
和 旋转 视图 ， 所 以 继续 使 用 现 有 的 相机 控制 器 ， 但 我 们 将 给 它 连 上 内 部 相机 driveCamera， 
这 在 前 面 已 经 介绍 过 。) 为 了 创建 控制 器 ， 我 们 将 使 用 Vizi 框架 构建 一 个 自 定义 组 件 。 


11.8.1 基于 Vizi.script 实 现 自 定义 组 件 


从 根本 上 来 说 ，Vizi 通过 将 两 个 简单 的 想法 相 结合 来 实现 它 的 功能 : (1) 一 系列 控制 通用 
3D 设计 模式 的 代码 〈 比 如 开始 /停止 一 个 行为 ， 查 找 鼠 标 下 的 对 象 ， 切 换 相 机 ) ; (2) 能 
将 对 象 放 在 一 起 并 让 它们 进行 交互 。Vizi 组 件 几乎 对 任意 对 象 都 有 效 ， 因 为 对 象 的 组 织 
式 是 一 致 的 ， 并 且 遵 循 一 些 简单 的 规则 。 例 如 ， 每 个 Vizi.0bject 实例 都 包含 一 个 变换 组 
件 ， 里 面 有 position、rotation 和 scale 属性 ， 从 而 允许 对 象 的 其 他 组 件 控制 它 。 

本 章 之 前 讨论 的 prefab， 比 如 Vizi.Prefabs.Skybox() 和 Vizi.Prefabs.FirstPersonContro- 
ller()， 它 们 作为 函数 创建 了 一 个 预 建 对 象 层级 结构 ， 并 返回 一 个 Vizt .Object 对 象 作为 新 
创建 层级 结构 的 根 节点 。 对 象 可 以 是 一 个 单一 简单 的 物体 ， 比 如 只 包含 一 个 立方 体 ， 男 一 
方面 ， 它 还 可 以 是 一 个 复杂 的 层级 结构 ， 包 含 几 个 对 象 及 组 件 。 不 仅仅 包含 简单 几何 体 的 
prefab， 一 般 都 会 有 一 个 或 多 个 脚本 来 实现 这 个 prefab 的 逻辑 。 例 如 Vizi skybox prefab 包 
含 一 个 立方 体 ， 还 有 一 个 脚本 用 于 匹配 skybox 的 方向 到 场景 中 主 相机 的 方向 上 。 


对 于 Futurgo 城市 应 用 来 说 ， 我 们 需要 创建 一 个 脚本 来 驾驶 和 车。 如果 我 们 将 这 个 脚本 作 
为 一 个 Vizi 组 件 添加 到 Futurgo 车 对 象 上 ，Vizi 框架 就 会 保证 每 次 运行 循环 的 时 候 调 用 
它 的 update() 方法 ， 使 得 它 能 够 响应 用 户 输入 ， 并 据 此 移动 车 。 下 面 让 我 们 来 看 看 如 何 


11.8.2 ”驾驶 车 的 控制 器 脚本 


回忆 一 下 在 模型 加 载 完 后 初始 化 车 的 代码 。 它 添加 了 选取 组 件 以 及 淡 入 淡出 等 ， 并 添加 了 
环境 贴图 。 它 还 做 了 以 下 工作 : 

// 添加 车 控制 器 

this.carController = new FuturgoController({enabled:false, 


scene: this.scene}); 
futurgo.addComponent(this.carController); 


创建 FuturgoController 组 件 只 是 用 来 完成 一 件 事情 : 使 用 方向 键 来 驾驶 车 。 向 上 箭头 加 
速 向 前 ， 向 下 箭头 刹车 ， 左 箭头 和 右 箭 头 朝 各 自 方向 转弯 。 这 个 控制 器 还 测试 碰撞 ， 保 证 
车 不 会 穿 墙 而 过 。 它 还 遵循 地 形 ， 当 车 开 上 人 行道 时 ， 会 随 着 路 面 的 升 高 而 升 高 ， 而 不 是 
“ 梨 ” 过 。 因 为 我 们 将 driveCamera 相机 放置 在 了 车 内 ， 借 助 变换 层级 结构 ， 相 机 会 随 着 车 
的 移动 而 移动 ， 所 以 我 们 可 以 享受 驾驶 。 


让 我 们 看 看 实现 这 个 控制 器 的 代码 ( 例 11-16) ， 源 码 在 文件 Chapter 11/futurgoController.js 
中 。 这 个 构造 函数 首先 声明 自身 为 Vizi.script 的 子 类 ，Vizi.script 是 框架 中 所 有 脚本 组 
件 的 基 类 。 然 后 它 初 始 化 儿 个 属性 : 移动 按键 的 状态 ， 当 前 的 速度 和 加 速度 ， 一 些 用 来 辅 
助 支持 碰撞 及 遵循 地 形 算法 的 控制 变量 ， 以 及 几 个 用 于 帮助 实现 伪 物 理 算 法 的 时 间 戳 ， 我 
们 将 用 这 些 伪 物理 算法 来 控制 车 的 速度 。 
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例 11-16: FuturgoController 组 件 的 构造 函数 


FuturgoController = function(param) 


{ 


param = param || ©}; 


Vizi. 


this. 
this. 


this. 


this. 
this. 
this. 
this. 


this. 
this. 
this. 
this. 
this. 
this 


this. 
this. 
this. 
this. 


this 
this. 


this. 
this. 


this.accelerateEndTime = this.brakeEndTime 


Script.call(this, param); 


enabled = (param.enabled !== undefined) ? param.enabled : 


scene = param.scene || null; 
turnSpeed = Math.PI / 2; // 90 degs/sec 


moveForward = false; 
moveBackward = false; 
turnLeft = false; 
turnRight = false; 


accelerate = false; 
brake = false; 
acceleration = 0; 
braking = 0; 

speed = 0; 


.rpm = 0; 


eyePosition = new THREE.Vector3; 

downVector = new THREE.Vector3(0, -1, 0); 
groundY = 0; 

avatarHeight = FuturgoCity.AVATAR_HEIGHT_SEATED; 


.SavedPos = new THREE.Vector3; 


movementVector = new THREE.Vector3; 


LastUpdateTime = Date.now(); 
accelerateStartTime = this.brakeStartTime 


this. lastUpdateTime; 


} 


true; 





Vizi 的 组 件 通 常会 实现 两 个 方法 : realize() 和 update()。 当 泻 染 、 输 入 、 网 络 或 其 他 浏 
览 器 事件 需要 创建 相关 数据 结构 的 时 候 ， 框 架 就 会 调用 realize( 
realize() 方 法 做 了 两 件 事情 : 保存 车 的 初始 位 置 值 ， 创 建 一 个 在 
为 (bounce behavior) 。 车 的 对 象 可 以 通过 this._object 属性 来 获得 ，Vizi 会 在 一 
个 组 件 添加 到 对 象 上 的 时 候 自动 设 置 好 它 。 


的 反弹 行 


Futu 


{ 











rgoController .prototype.realize = function() 
this.lastUpdateTime = Date.now(); 


// 保存 地 板 位 置 


this.groundY = this. object.transform.position.y; 


// 添加 车 发 生 碰撞 时 触发 的 反弹 行为 


this.bouncer = new Vizi.BounceBehavior( 














)。 对 于 车 控制 器 来 说 ， 
车 发 生 碰 撞 的 时 候 触 发 











| 
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{ duration : FuturgoController .BOUNCE_DURATION } 
); 
this._object.addComponent(this.bouncer); 


J} 


现在 来 看 看 update() 方法 : 每 个 对 象 中 的 每 个 组 件 的 update() 方法 ， 都 会 在 应 用 的 每 次 
运行 循环 中 被 调用 。 对 于 车 控制 器 ，update() 需要 做 几 件 事情 。 首 先 ， 它 保存 车 的 当前 位 
置 ， 这 将 会 在 发 生 碰撞 或 者 需要 根据 地 形 的 高 低 上 下 移动 的 时 候 恢 复 。 然 后 ， 它 根据 内 部 
的 物理 算法 更 新 速度 。 接 着 ， 它 使 用 速度 属性 来 计算 新 的 位 置 。 最 后 测试 碰撞 及 地 形 跟随 


(terrain following ) 。 












































FuturgoController.prototype.update = function() 


{ 
if (!this.enabled) 
return; 


var now = Date.now(); 
var deltat = now - this.lastUpdateTime; 


this.savePosition(); 
this.updateSpeed(now, deltat); 
this.updateposition(now, deltat); 
this. testCollision(); 

this. testTerrain(); 


this. LastUpdateTime = now; 


} 


更 新 速度 涉及 使 用 简单 的 伪 物 理 算法 来 模拟 加 速度 和 动量 ， 请 看 例 11-17。 向 上 箭头 按 得 
越久 ， 加 速度 就 越 大 ， 向 下 箭头 按 得 越久 ， 和 刹车 就 踩 得 越久 ， 从 而 让 车 慢 下 来 。 如 果 设 有 
键 按 下 ， 但 车 已 经 在 动 了 ， 还 会 有 一 定 的 动量 。 经 过 这 些 计算 后 ， 如 果 速 度 或 加 速度 有 变 
化 ， 我 们 还 会 触发 事件 来 告诉 监听 器 速度 变化 了 。 仪 表盘 控制 器 〈 本 章 后 面 介 绍 ) 会 使 用 
这 个 信息 在 刻度 盘 上 改变 速度 及 转速 (RPM) 的 视图 。 


例 11-17: 更 新 车 速 


FuturgoController .prototype.updateSpeed = function(now, deltat) { 












































var speed = this.speed, rpm = this.rpm; 





// 在 油门 踩 下 时 加 速 
if (this.accelerate) { 
var deltaA = now - this.accelerateStartTime; 
this.acceleration = deltaA / 1000 * FuturgoController .ACCELERATION; 


} 
else { 
// 动量 
var deltaA = now - this.accelerateEndTime; 
this.acceleration -= deltaA / 1000 * FuturgoController.INERTIA; 
this.acceleration = Math.max( 0, Math.min( FuturgoController .MAX_ACCELERATION ， 
this.acceleration) ); 
} 





} 


speed += this.acceleration; 


// 踩 下 刹车 时 减速 
if (this.brake) { 
var deltaB = now - this.brakeStartTime; 
var braking = deltaB / 1000 * FuturgoController .BRAKING; 


speed -= braking; 
} 
else { 
// 惯性 
var inertia = deltat / 1000 * FuturgoControLLer .INERTIA; 
speed -= inertia; 
} 


speed = Math.max( 0, Math.min( FuturgoController.MAX_SPEED, speed ) ); 
rpm = Math.max( 0, Math.min( FuturgoController.MAX_ACCELERATION, 
this.acceleration ) ); 


if (this.speed != speed) { 
this.speed = speed; 
this.dispatchEvent("speed", speed); 


上 


if (this.rpm != rpm) { 
this.rpm = rpm; 
this.dispatchEvent("rpm", rpm); 





为 了 改变 车 的 位 置 ， 我 们 需要 使 用 当前 的 速度 来 在 当前 视线 (z 轴 的 负 方 向 ) 上 移动 。 我 
们 还 要 让 对 象 围绕 自身 y 轴 旋转 来 控制 车 的 转弯 。 








FuturgoController.prototype.updatePosition = function(now, deltat) { 


var actuaLMoveSpeed = deltat / 1000 * this.speed; 
var actualTurnSpeed = deltat / 1000 * this.turnSpeed; 


// z 轴 上 的 运动 


this. object.transform.object.transLateZ( -actualMoveSpeed ); 


// 使 车 辆 始终 在 地 面 上 行驶 


this. object.transform.position.y = this.groundY; 


// 转弯 
if ( this.turnLeft ) { 
this._object.transform.object.rotateY( actualTurnSpeed ); 





} 


if ( this.turnRight ) { 
this._object.transform.object.rotateY( -actualTurnSpeed ); 


} 
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1. 检测 车 与 场景 的 碰撞 

检测 车 与 建筑 间 碰 撞 的 代码 和 Vizi.FirstPersonController 中 所 用 的 碰撞 检测 代码 类 似 。 
它 调 用 图 形 系统 的 objectFromRay() 方法 来 计算 从 当前 相机 位 置 到 场景 中 任意 几何 体 的 相 
交 。 注 意 传递 给 objectFromRay() 的 第 一 个 参数 this.scene， 它 包含 城市 场景 中 的 所 有 几 
何 体 ， 但 不 包括 车 本 身 。 如 果 我 们 在 碰撞 检测 中 包括 车 的 几何 体 ， 它 将 永远 返回 true。 


FuturgoControLLer .prototype.testCoLLision = function() { 








this .movementVector .copy(this. object.transform.position) 
.SuUb(this.savedPos ) ; 

this .eyePosition.copy(this.savedPos ) ; 

this.eyePosition.y = this.groundY + this.avatarHeight; 


var collide = null; 
if (this.movementVector.length()) { 


collide = Vizi.Graphics.instance.objectFromRay(this.scene, 
this .eyePosition, 
this .movementVector, 
FuturgoController .COLLISION_MIN, 
FuturgoController .COLLISION_MAX); 


if (collide && collide.object) { 
var dist = this.eyepPosition.distanceTo(collide.hitpointWorld); 
} 
4 


if (collide && collide.object) { 
this.handleCollision(collide); 
} 


} 


2. 实现 碰撞 响应 

在 我 们 浏览 城市 的 时 候 ， 第 一 人 称 控制 器 避免 我 们 穿 过 实体 建筑 。 当 碰撞 发 生 的 时 候 ， 我 
们 就 会 停 下 来 。 而 对 于 车 ， 我 们 想 要 有 些 不 同 。 在 真实 世界 中 ， 当 车 撞 上 建筑 的 时 候 ， 它 
如 果 不 撞 碎 就 会 被 反弹 。 我 们 的 模拟 比较 随意 ， 在 Futurgo 车 碰撞 到 场景 中 物体 的 时 候 会 
轻 轻 反弹 。3D 应 用 响应 物体 碰撞 的 概念 被 称 为 碰撞 响应 (collision response)。 


例 11-18 展示 了 在 车 控制 右 中 如 何 实现 反弹 碰撞 响应 。 首 先 ， 我 们 触发 一 个 “collide” 事 
件 给 所 有 监听 器 。 应 用 会 监听 这 个 事件 ， 在 车 碰撞 的 时 候 触 发 一 个 声音 。 然 后 ， 我 们 调用 
restorePosition() 方法 恢复 车 的 原始 位 置 ， 来 避免 它 穿 过 碰撞 体 。 接 下 来 ， 回 忆 一 下 在 
realize() 方法 中 ， 我 们 向 Futurgo 车 添加 了 一 个 Vizi.BounceBehavior 组 件 。 我 们 触发 那 
个 反弹 行为 ， 它 会 让 车 向 后 反弹 一 点 。 这 里 的 向 后 是 指 加 移动 方向 的 反方 向 。 请 看 我 们 如 
何 设置 bouncer 的 bouncevector 属性 为 移动 向 量 的 负数 ， 并 缩放 到 1/3 来 模拟 部 分 动量 在 
“碰撞 ”的 时 候 被 吸收 了 。 最 后 ， 我 们 关闭 引擎 。 


例 11-18: 一 个 碰撞 响应 


FuturgoController .prototype.handleCollision = function(collide) { 


























hl 
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// 通知 所 有 的 监听 器 
this.dispatchEvent("collide", collide); 














// 后 退 到 上 一 次 保存 的 位 置 


this.restorePosition(); 


// 触发 反弹 行为 

this.bouncer .bounceVector 
.Copy(this.movementVector) 
.negate() 
.multiplyScalar( .333); 

this.bouncer .start(); 


// 关闭 引擎 ( 让 车 停 下 ) 
this.speed = 0; 
this.rpm = 0; 





} 
3 ”实现 地 形 跟随 


城市 环境 非常 平坦 ， 但 还 是 有 些 地 方 会 凸 起 。 人 行道 会 比 道路 要 高 一 点 。 我 们 需要 决定 当 
Futurgo 开 到 上 面 的 时 候 如 何 处 理 ， 可 以 选择 停止 或 开 上 人 行道 。 但 我 们 不 希望 车 “ 梨 ” 过 
人 行道 ， 好 像 人 行道 不 存在 一 样 。 在 碰 到 人 行道 的 时 候 ， 停 止 是 一 个 简单 的 解决 方法 ,但 





这 很 无 趣 。 因 此 我 们 将 让 车 开 到 人 行道 上 ， 为 此 需要 实现 地 形 跟随 。 


地 形 跟 随 是 指使 相机 或 化 身 与 地 面 保持 固定 距离 的 算法 。 当 相机 在 场景 中 移动 的 时 候 ， 会 
向 下 投射 一 束 光 线 。 如 果 它 碰 上 任何 几何 体 ， 将 会 检查 几何 体 的 距离 ， 和 相机 的 期 望 高 度 


























进行 比较 : 如 果 距 离 小 于 期 望 值 ， 相 机 就 会 上 升 ， 看 起 来 升 高 了 ， 如 果 距 离 比 期 望 值 大 ， 








相机 就 会 下 移 。 





Futurgo 车 控制 器 在 它 的 update 方法 中 每 次 都 会 执行 地 形 跟随 检测 。 我 们 再 一 次 使 用 Vizi 的 


方法 来 测试 和 场景 几何 体 的 碰撞 ， 不 过 这 一 次 是 向 下 的 光线 (downVector 


[9, = 0])。 


你 可 以 自己 测试 一 下 ， 驶 向 建筑 ， 车 会 开 上 人 行道 。 开 回 街道 的 时 候 ， 车 会 落 到 路 面 。 查 








看 例 11-19 中 的 代码 ， 以 及 图 11-14 中 碰撞 及 地 形 跟随 的 演示 。 
例 11-19: Futurgo 中 的 地 形 跟随 


FuturgoController .prototype.testTerrain = function() { 
Var EPSILON = 0.00001; 
var terrainHit = Vizi.Graphics.instance.objectFromRay(this.scene, 
this .eyepPosition, 


this. downVector ); 


if (terrainHit && terrainHit.object) { 


var dist = this.eyePosition.distanceTo(terrainHit.hitpointWorld); 


var diff = this.avatarHeight - dist; 
if (Math.abs(diff) > EPSILON) { 
console.log("distance", dist); 


this.eyePosition.y += diff; 
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this. object.transform.position.y += diff; 
this.groundY = this. object.transform.position.y; 
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图 11-14: 碰撞 和 地 形 跟随 一 一 车 停 在 墙 边 ， 它 使 用 光线 投射 来 开 到 人 行道 上 


11.9 ”给 环境 添加 声音 


现在 已 经 非常 有 趣 了 ， 我 们 可 以 驾驶 着 Futurgo 在 城市 道路 中 自由 行驶 ， 但 还 缺 了 一 样 东 
西 : 声音 。 声 音 对 于 基于 页 面 的 Web 应 用 来 说 有 些 奢侈 ， 但 在 一 个 真实 3D 场景 中 ， 缺 少 
它 会 很 显眼 。 谢 天 谢 地 ， 使 用 标准 HTMLS5 音频 可 以 轻松 添加 基本 声音 。 

对 于 这 个 应 用 ， 我 们 只 需要 两 个 声音 : 一 个 循环 播放 的 城市 背景 环境 声 ， 一 个 车 磁 撞 到 物 
体 时 所 发 出 的 “撞击 ” 声 。 首 先 ， 我 们 添加 <audio> 和 <sound> 元 素 到 HTML 页 面 中 ( 文 
件 Chapter 11/futurgoCity.html) : 





<audio volume="0.0" id="city_sound"> 

<!-- http://www.freesound.org/people/synthetic-oz/sounds/162704/ --> 
<source src="../sounds/162704__synthetic-oz city-trimmed-looped.wav" 

type="audio/wav" /> 

Your browser does not support WAV files in the audio element. 

</audio> 

<audio volume="0.0" id="bump_sound"> 

<!-- http://www.freesound.org/people/Calethos/sounds/31126/ --> 
<source src="../sounds/31126__calethos__bump.wav" type="audio/wav" /> 
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Your browser does not support WAV files in the audio element. 


</audio> 
nn 


时 候 ， 城 市 声音 的 音量 应 该 低 一 些 ， 在 我 们 离开 驾 
原 有 大 小 。 当 我 们 各 





需要 播放 一 


人 音量 和 触发 声音 播放 。 当 我 们 进入 Futurgo 进行 试 驾 的 


音量 


er 城市 
童 击 声 。 


量 应 该 恢复 


吉 立 
户 目 











音 实现 的 源码 在 文件 Chapter 11/futurgoSound.js 中 。 它 非常 简单 ， 使 用 标准 HTML5 


Du audio 方法 。 例 11-20 展示 了 全 部 的 代码 。 
降低 环境 背景 音 的 音量 。bump() 方法 播放 一 次 撞 


上 月 时 


例 11-20: 在 Futurgo 城市 场景 中 管理 


FuturgoSound = function(param) { 


= 
声音 





this. 
this. 
this. 


citySound 
citySound.loop = true; 


this 
this 


.bumpSound 
.bumpSound.voLume 


} 


FuturgoSound.prototype.start = function() { 


this.citySound.play(); 


} 


FuturgoSound.prototype.bump = function() { 


this.bumpSound.play(); 


} 


FuturgoSound.prototype.interior = function() { 
$(this.citySound).animate( 
{volume: 
FuturgoSound.FADE_TIME); 
} 


FuturgoSound.prototype.exterior = function() { 


$(this.citySound).animate( 
{volume: FuturgoSound.CITY_VOLUME}, 
FuturgoSound.FADE_TIME); 
} 


FuturgoSound.prototype.bump = function() { 


this.bumpSound.play(); 


interior() 和 exterior() 方法 分 别提 高 和 
击 声 。 


= document.getElementById("city_sound"); 
citySound.volume = FuturgoSound.CITY_VOLUNME ; 


= document .getELementById("bump_sound " ) ; 
FuturgoSound.BUMP_VOLUME; 


FuturgoSound.CITY_VOLUME_INTERIOR}, 





es| 
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FuturgoSound.CITY_VOLUME = 0.3; 
FuturgoSound.CITY_VOLUME_INTERIOR = 0.15; 
FuturgoSound.BUMP_VOLUME = 0.3; 
FuturgoSound.FADE_TIME = 1000; 


唯一 剩 下 的 事情 就 是 在 应 用 中 调用 这 些 方法 。 回 过 头 来 看 看 startTestDrive() 中 的 操作 步 
又 (文件 Chapter 11/futurgoCity.js) : 
// 创建 城市 背景 音 的 隔音 效果 


that. sound.interior(); 
在 离开 车 的 时 全 调用 exterior() 方法 来 恢复 背景 音 到 初始 音量 。 
FuturgoCity 类 还 处 理 了 碰撞 声音 ,添加 一 个 事件 监听 到 车 控制 器 中 : 


this.carController .addEventListener("collide", function(collide) { 
that. sound.bump(); 
]); 


11.10 泻 染 动态 纹理 

我 们 已 经 到 了 创建 真实 环境 之 旅 的 最 后 一 程 。Futurgo 车 已 经 可 以 开动 了 。 在 实现 声音 后 ， 
我 以 为 我 已 经 完成 了 所 有 代码 的 编写 。 但 当 我 进入 到 车 内 驾驶 的 时 候 ， 却 感觉 毫 无 生机 。 
我 很 快意 识 到 ， 这 是 因为 控制 面板 的 刻度 表 是 不 动 的 ， 当 车 移动 的 时 候 ， 车 速 表 和 转速 表 
上 的 刻度 盘 并 没有 跟着 变化 。 和 之 前 声音 的 例子 一 样 ， 环 境 的 真实 性 提升 了 我 的 期 望 值 。 
当 车 移动 的 时 候 ， 刻 度 盘 应 该 跟着 旋转 。 所 以 我 们 需要 让 仪表 盘 动 起 来 ， 或 者 至 少 让 它 的 
纹理 贴图 动 起 来 。 


在 本 节 中 ， 我 们 将 创建 一 个 程序 纹理 (procedural texture) ， 它 是 通过 程序 代码 动态 绘制 
的 纹理 贴图 (而 不 是 从 一 个 文件 加 载 进来 的 静态 图 片 )。 为 此 ， 我 们 需要 使 用 后 备 的 2D 
canvas 泻 染 。 仪 表盘 使 用 2D Canvas API 来 生成 一 个 程序 纹理 ， 用 于 表示 当前 仪表 上 的 速 
度 值 和 转速 值 。 

Futurgo 仪表 盘 上 最 初 的 纹理 贴图 有 固定 位 置 的 刻度 指针 。 我 让 TC 将 刻度 指针 从 仪表 盘 中 
分 离 出 来 ， 作 为 一 个 单独 的 图 片 。 他 完成 后 给 了 我 分 离 好 的 图 片 。TC 并 不 需要 修改 3D 模 
型 ， 他 只 需 修改 纹理 。 这 两 个 位 图 文件 如 图 11-15 和 图 11-16 所 示 。 




























































































































































































272 | 第 11 章 

















图 11-15: 仪表 盘 的 纹理 贴图 














图 11-16: 可 旋转 刻度 指针 的 纹理 贴图 





为 了 实现 仪表 盘 动 画 ， 我 们 将 创建 另 一 个 自 定 义 Vizi 组件 FuturgoDashboard。Futurgo 
Dashboard 是 一 个 脚本 ， 它 创建 一 个 HIML Canvas 元 素 ， 在 realLize() 方法 中 加 载 刚才 
的 两 个 位 图 ， 并 在 update() 方法 中 根据 当前 的 车 速 和 转速 来 更 新 刻度 指针 。 我 们 将 在 
FuturgoController 中 通过 添加 事件 监听 来 跟踪 车 速 和 转速 的 变化 。 


例 11-21 展示 了 设置 它 的 代码 。realize() 创建 了 一 个 新 的 Canvas 元 素 ， 使 用 Three.js 纹 
理 对 象 来 容纳 它 。 然 后 我 们 设置 这 个 新 的 纹理 为 仪表 盘 材 质 的 map 属性 。 然 后 ， 我 们 可 以 
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使 用 标准 的 Canvas 2D 绘图 API 调用 来 更 新 Canvas 的 内 容 ， 这 些 修改 会 反映 到 物体 的 纹 














理 贴图 上 。 
例 11-21: 为 仪表 盘 创 建 一 个 canvas 纹理 


FuturgoDashboardScript.prototype.realize = function() 


{ 

















// 设置 仪表 盘 盘 面 刻度 
var gauge = this. object.findNode("head_ light _L1"); 
var visuyal = gauge.visuyals[0]; 























// 创建 一 个 新 的 用 于 绘制 的 canvas 元 素 

var canvas = document.createElement("canvas"); 
canvas.width = 512; 

canvas .height = 512; 





// 以 这 个 canvas 元 素 为 源 创 建 一 个 Three. js 纹理 对 象 

var texture = new THREE.Texture(canvas ) ; 
texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
visual.material.map = texture; 


this.texture = texture; 
this.canvas = canvas; 
this.context = canvas.getContext("2d"); 


继续 看 realize() 的 后 半 部 分 ， 到 了 加 载 纹 理 的 代码 。 我 们 使 用 DOM 属性 来 实现 : 首先 ， 
设置 一 个 onload 处 理 函 数 ， 它 会 告诉 我 们 什么 时 候 图 片 加 载 完 并 准备 好 ， 然 后 ， 我 们 设置 





src 属性 来 加 载 图 片 。 


// 加 载 仪表 盘 和 刻度 的 纹理 
this.dashboardImage = null; 
this.diallmage = null; 








var that = this; 

var imagel = new Image(); 

image1.onLoad = function () { 
that.dashboardImage = imagel; 
that.needsUpdate = true; 


} 


imagel.src = FuturgoDashboardScript.dashboardURL; 


var image2 = new Image(); 

image2.onLoad = function () { 
that.dialImage = image2; 
that.needsUpdate = true; 


} 


image2.src = FuturgoDashboardScript.dialURL; 


// 强制 进行 初始 化 更 新 


this.needsUpdate = true; 





} 











现在 可 以 绘制 纹理 了 ， 查 看 例 11-22。 每 次 调用 仪表 盘 update() 方法 的 时 候 ， 我 们 将 根据 
车 控制 器 的 速度 值 或 转速 值 是 否 变化 ,来 决定 是 否 需要 重 绘 纹理 。 如 果 有 变化 ， 我 们 调用 











darw() 方法 来 应 用 Canvas API 绘制 到 纹理 上 。 首 先 ，draw() 会 使 用 当前 文本 的 颜色 清空 
canvas 的 内 容 。 然 后 ， 如 果 仪 表 板 位 图 加 载 好 了 ， 它 会 使 用 上 下 文 的 drawImage() 方法 进 
行 绘制 ， 使 用 图 片 的 像素 来 覆盖 整个 canvas。 


例 11-22: 绘制 仪表 盘 背 景 图 像 
FuturgoDashboardScript.prototype.draw = function() 


{ 




















Var context = this.context; 
Var canvas = this.canvas; 


context.clearRect(0, 0, canvas.width, canvas.height); 
context.fillStyle = this.backgroundColor; 
context.fillRect(0, 0, canvas.width, canvas.height); 


context.fillStyle = this.textColor; 


if (this.dashboardImage) { 
context.drawImage(this.dashboardImage, 0, 0); 


} 





如 果 你 对 Canvas API 不 熟悉 ， 第 7 章 介 绍 了 Canvas 绘图 基础 。 








现在 ， 我 们 需要 将 刻度 指针 画 在 上 面 。 我 们 已 经 跟踪 了 车 速 和 转速 ( 待 会 儿 会 详细 介绍 )， 
将 使 用 这 些 值 来 计算 刻度 指针 位 图 旋转 的 角度 。 回 忆 一 下 2D Canvas API 中 提供 的 save() 
和 restore() 方法 ， 它 们 用 于 在 一 系列 绘制 操作 前 保存 上 下 文 的 当前 状态 ， 并 在 完成 绘制 
后 恢复 。 我 们 会 在 绘制 每 个 刻度 指针 的 时 候 调 用 它们 。 保 存 好 状态 后 ， 我 们 在 上 下 文 上 执 
行 2D 变换 ， 将 我 们 即将 绘制 的 刻度 指针 像素 平移 到 仪表 正确 的 位 置 上 ， 然 后 旋转 到 正确 
的 位 置 上 ， 和 当前 车 速 值 和 转速 值 匹 配 。 然 后 ， 我 们 绘制 图 片 并 恢复 上 下 文 。 我 们 对 每 个 
义 表 都 这 么 操作 。( 基 于 刻度 指针 位 图 的 尺寸 ， 我 得 到 了 这 里 所 用 到 的 平移 值 ， 通 过 一 个 
图 片 编辑 程序 ， 我 得 到 了 一 个 可 以 确定 的 位 置 。) 

var Speeddeg = this._speed * 10 - 120; 

var speedtheta = THREE.Math.degToRad(speeddeg ) ; 


var rpmdeg = this._rpm * 20 - 90; 
var rpmtheta = THREE.Math.degToRad(rpmdeg ) ; 















































if (this.dialImage) { 
context. save(); 


context.translate(FuturgoDashboardScript.speedDialLeftOffset, 
FuturgoDashboardScript.speedDialTopOffset); 

context.rotate(speedtheta); 

Context.transLate(-FuturgoDashboardScript.diaLCenterLeftOffset， 
-FuturgoDashboardScript.dialCenterTopOffset); 

context.drawImage(this.dialImage, 0, 0); 

context.restore(); 


context. save(); 
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Context .transLate(FuturgoDashboardScript.rpmDiaLLeftOffset， 
FuturgoDashboardScript.rpmDialTopOffset); 

context.rotate(rpmtheta); 

Context .transLate(-FuturgoDashboardScript.diaLCenterLeftOffset， 
-FuturgoDashboardScript.diaLCenterTopOffset); 

context.drawImage(this.dialImage, 0, 0); // 198, 25, 115); 

context.restore(); 


} 
唯一 剩 下 的 事情 就 是 连接 车 控制 右 到 仪表 盘 上 ， 使 它 可 以 监听 车 速 和 转速 的 变化 。 
城市 应 用 在 仪表 盘 创 建 后 设置 它 的 carcontroller 属性 : 

this.dashboardScript.carController = this.carController; 

carController 的 代码 展示 在 例 11-23 中 ， 它 是 一 个 使 用 0bject.defineProperties 创建 的 
JavaScript 属性 。 在 内 部 实现 中 ， 设 置 属性 会 调用 对 象 的 访问 方法 setCcarController()。 该 
方法 保存 控制 器 到 一 个 私有 属性 this._carController 中 ， 并 添加 车 控制 器 “speed” 和 
“rpm” 事 件 的 监听 器 。 这 些 监听 器 会 保存 新 的 值 ， 然 后 通过 设置 仪表 盘 的 needsUpdate 属 
性 来 标记 它 需 要 重 绘 。 现 在 ， 当 车 速 提高 或 降低 的 时 候 ， 仪 表盘 的 显示 界面 会 进行 重 绘 来 
反映 这 一 变化 。 
例 11-23: 仪表 盘 控 制 器 脚本 设置 车 速 和 转速 改变 的 监听 器 


FuturgoDashboardScript.prototype.setCarController = 
function(controller) { 














this._carController = controller; 


var that = this; 

controller .addEventListener("speed", function(speed) { 
that. setSpeed(speed); }); 

controller .addEventListener("rpm", function(rpm) { 
that.setRPM(rpm); }); 





使 用 Canvas 元 素 作 为 WebGL 纹理 的 能 力 非常 强大 。 它 允许 开发 者 使 用 熟 
悉 、 简 单 的 API 来 在 JavaScript 中 动态 绘制 纹理 ， 开 启 了 实现 激动 人 心 效 果 
的 可 能 。WebGL 的 设计 者 在 这 一 点 上 是 正确 的 。WebGL 还 支持 HTML 视频 
元 素 纹理 ， 可 以 进行 更 强大 的 组 合 。 























11.11 小结 
这 一 章 很 长 ， 但 涉及 了 许多 内 容 。 
你 学 到 了 如 何在 Web 页 面 中 实现 一 个 可 用 的 、 看 起 来 真实 的 3D 环境 ， 它 带 有 全 景 背 景 、 


环境 贴图 反射 、 用 户 控制 的 导航 、 音 效 设计 ， 以 及 可 以 使 用 交互 行为 来 移动 的 物体 。 我 们 
扩展 了 我 们 的 工具 ， 给 预览 工具 添加 了 新 功能 ， 让 它 允 许 我 们 查看 场景 图 的 结构 ， 以 及 每 








个 对 象 的 详细 属性 。 你 学 习 了 如 何 开发 几 个 经 典 3D 游戏 算法 和 特效 的 简单 版 本 ， 比 如 第 
一 人 称 导 航 、 碰 撞 检 测 、 地 形 跟 随 、skybox 演 染 以 及 程序 纹理 。 
在 浏览 器 中 创建 3D 环境 是 一 项 复杂 的 工作 ， 但 它 可 以 在 常规 Web 开发 的 时 间 和 预算 内 完 
成 。 现 在 ， 你 对 如 何 完成 它 已 经 有 所 了 解 。 
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第 12 章 


开发 移动 3D 应 用 








随 着 过 去 10 年 的 发 展 ，HTML5 在 手机 和 平板 电脑 中 发 生 了 更 有 具 革命 性 的 演变 。 夷 果 
iPhone 和 iPad 的 普及 模糊 了 移动 设备 和 传统 电脑 间 的 界限 。 移 动 设备 目前 在 每 年 的 发 货 
量 上 超过 了 传统 计算 机 ， 因 为 消费 者 期 待 更 简单 、 更 小 巧 和 更 便携 的 设备 来 玩 游戏 、 看 视 
频 、 昕 音乐 、 写 邮件 、 上 网 以 及 打 电 话 。 这 些 新 的 掌上 设备 还 提供 了 大 量 新 功能 ， 包 括 基 
于 位 置 的 服务 、 触 摸 屏 界面 、 设 备 方向 输入 。 


为 了 能 够 使 用 智能 手机 和 平板 电脑 所 提供 的 新 功能 ， 开 发 者 通常 需要 学 习 新 的 编程 语言 和 
操作 系统 。 比 如 ， 为 苹果 设备 开发 应 用 需要 使 用 iOS 系统 的 API， 并 基于 Objective-C 语言 
(或 者 从 其 他 类 似 于 C++ 这 样 的 原生 语言 桥接 到 它 ) 进行 开发 ， 为 Android 操作 系统 开发 
需要 学 习 不 同 的 API， 并 基于 Java 开发 。 一 段 时 间 以 来 ， 移 动 平 台 只 为 基于 HTMLS5 开发 
提供 了 有 限 的 能 力 ， 它 使 用 基于 WebKit 的 控件 来 蔡 入 到 应 用 中 。 移 动 平台 人 允许 开发 者 使 
用 HTML、CSS 及 JavaScript 开发 演示 脚本 及 一 些 应 用 逻辑 ， 但 为 了 访问 平台 的 功能 ， 还 
需要 使 用 原生 代码 来 编写 应 用 的 大 部 分 内 容 ， 包 括 基于 OpenGL 的 3D 图 形 ， 这 些 都 还 没 
有 在 移动 浏览 器 中 支持 。 

过 去 的 几 年 ， 浏 览 器 追赶 上 来 了 。 大 部 分 最 初 在 移动 平台 上 创新 的 功能 已 经 进入 HTML5 
规范 。 针 对 特定 设备 的 原生 移动 开发 及 Web 开发 这 两 个 曾经 分 开 的 世界 ， 看 起 来 就 要 融合 
了 。 对 于 许多 Web 和 移动 应 用 开发 者 而 言 ， 这 是 一 件 好 事 : HTML5 和 JavaScript 可 以 降 
低 开发 成 本 ,还 有 开发 出 真正 跨 平台 应 用 的 潜力 。3D 是 最 近 增 加 进去 的 功能 。 移 动 设备 
对 CSS3 的 支持 很 普遍 ， 而 WebGL 现在 已 经 快 被 移动 平台 普遍 支持 了 。 在 本 章 中 ， 我 们 
将 看 看 开发 基于 HTML5 的 移动 3D 应 用 时 会 遇 到 的 问题 。 


12.1 移动 3D 平 台 


尽管 原生 API 还 在 功能 上 领先 于 HIML5， 但 距离 在 快速 缩小 。 尽 管 存在 一 些 限制 ， 但 3D 
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已 经 在 大 部 分 移动 浏览 器 中 得 到 支持 。 大 部 分 浏览 器 支持 WebGL， 但 有 些 ， 比 如 移动 版 

Safari 还 不 支持 。 在 本 书写 作 之 际 ， 以 下 是 在 移动 设备 上 开发 基于 HTMLS5 应 用 的 现状 。 

。 很 多 移动 浏览 器 支持 WebGL， 但 并 不 是 全 部 ， 表 12-1 汇总 了 支持 WebGL 的 浏览 器 。 

。 所 有 移动 浏览 器 都 支持 CSS 3D 变换 、 过 渡 及 动画 。 第 6 章 开 发 的 例子 应 该 能 在 任意 移 
动 浏 览 器 环境 下 运行 。 如 果 你 的 应 用 的 3D 需求 很 简单 ， 主 要 是 在 2D 页 面 元 素 中 的 3D 
特效 ， 你 应 该 认真 考虑 使 用 CSS3 而 不 是 WebGL， 因 为 WebGL 并 没有 在 移动 设备 中 得 
到 全 面 支持 。 

。 所 有 移动 浏览 器 都 支持 2D Canvas API。 它 可 以 用 来 作为 不 支持 WebGL 的 移动 平台 的 
潜在 降级 方案 ， 虽然 它 有 性 能 问题 ， 因 为 2D Canvas 元 素 并 没有 硬件 加 速 。 


表 12-1: 移动 设备 和 操作 系统 中 的 WebGL 支 持 
































































































































平台 /设备 支持 的 浏览 

Amazon Fire OS (基于 Android) Amazon Silk (只 有 Kindle Fire HDX) 

Android 移动 版 Chrome、 移 动 版 Firefox 

Apple iOS 在 移动 版 Safari 和 移动 版 Chrome 中 不 支持 ;在 iAds 框架 中 支持 ， 它 
用 来 在 应 用 中 创建 基于 HTML5 的 广告 

BlackBerry 10 BlackBerry Browser 

Firefox OS 移动 版 Firefox 

Intel Tizen Tizen Browser 

Windows RT Internet Explorer (需要 Windows RT 8.1 或 更 高 版 本 ) 





在 上 面 的 表格 中 最 明显 的 区 别 就 是 ， 在 iOS 上 的 移动 版 Safari 和 移动 版 Chrome 中 缺乏 对 
WebGL 的 支持 。 尽 管 Android 在 移动 市 场 份额 上 取得 了 巨大 的 成 绩 ， 其 他 系统 也 逐渐 流行 
起 来 ， 但 iOS 依然 是 一 个 非常 流行 的 移动 平台 ， 对 开发 者 有 着 极 大 的 吸引 力 。iOS 的 情况 
或 许 未 来 会 改变 ， 但 现实 是 目前 iOS 中 的 浏览 器 不 支持 WebGL。 

在 浏览 器 不 支持 WebGL 的 平台 上 ， 有 一 些 适 配 技术 ， 被 称 为 “混合 ” (hybrid) 解决 方案 ， 
它 为 应 用 程序 提供 WebGL API。 开 发 者 可 以 使 用 JavaScript 来 编写 他 们 的 应 用 ，JavaScript 
能 调用 一 系列 原生 代码 实现 API。 结 果 并 不 是 一 个 基于 浏览 器 的 应 用 ,但 有 原生 代码 的 执 
行 性 能 ， 并 且 可 以 获得 JavaScript 快速 简单 开发 的 好 处 。 我 们 将 在 本 章 后 面 研究 其 中 一 种 
技术 : Ludei 公司 的 Cocoon]JS。 
对 于 支持 WebGL 的 移动 平台 ， 有 两 种 部 署 方案 : 基于 浏览 器 的 应 用 和 打包 的 应 用 (通常 
被 称 为 Web 应 用 )。 对 于 基于 浏览 器 的 移动 WebGL， 你 只 需要 像 开 发 桌面 平台 应 用 那样 进 
行 开 发 ， 然 后 发 布 到 你 的 服务 器 上 。 对 于 Web 应 用 ， 你 需要 使 用 平台 的 工具 来 打包 文件 
(这 些 文件 通常 是 你 要 发 布 到 服务 器 上 的 那些 ， 或 许 还 加 入 一 个 图 标 和 一 些 元 数据 信息 )， 
然后 通过 平台 的 应 用 商店 或 类 似 的 服务 来 发 布 。 

不 管 你 如 何 部 署 你 的 应 用 ， 有 一 些 你 在 开发 移动 3D 时 需要 特别 注意 的 地 方 。 首 先 ， 你 将 
需要 添加 对 设备 能 力 的 支持 ， 比 如 触摸 输入 、 位 置 和 设备 方向 。 你 还 需要 更 加 留心 性 能 ， 
因为 移动 设备 上 的 内 存 更 小 并 且 (通常 ) CPU 和 GPU 的 运算 能 力 更 弱 。 我 们 将 在 本 章 后 
面 介绍 这 些 话题 。 
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HTMLS5 移动 平台 在 不 断 变化 中 ， 似 乎 每 天 都 会 出 现 新 的 平台 。 维 基 词 条 
(http://en.wikipedia.org/wiki/HTML5_in_mobile_devices) 对 相关 背景 信息 进行 
了 恰当 的 概述 。 











12.2 为 移动 浏览 器 开发 

如 果 你 已 经 有 为 桌面 浏览 器 创建 WebGL 应 用 的 经 验 ， 开 始 移动 开发 会 很 简单 ， 只 需 将 
浏览 器 指向 相关 URL。 如 果 你 的 移动 平台 支持 WebGL， 它 应 该 会 正常 运行 。 性 能 肯 
定 会 有 差异 。 设 备 和 操作 系统 平台 支持 许多 不 同 的 硬件 配置 : 有 些 非常 低 端 ， 比 如 来 
自 GeeksPhone 的 Firefox OS 手机 ， 甚 他 的 性 能 都 还 不 错 ， 比 如 新 的 Samsung Galaxy 和 
Google Nexus 平板 。 但 它们 至 少 都 能 在 屏幕 中 泻 染 一 些 效果 ， 让 你 在 此 基础 上 开发 。 


在 我 测试 的 设备 中 ， 让 我 印象 最 桨 刻 的 就 是 Amazon Kindle Fire HDX， 它 于 2013 年 10 
月 发 布 。Kindle Fire HDX 是 Kindle Fire 产品 线 的 升级 ， 有 优秀 的 硬件 配置 : 一 颗 来 自 
高 通 的 戏 龙 (Snapdragon) 四 核 处 理 器 ， 以 及 加 上 了 对 HTML5 一 流 支 持 的 Adreno 330 
GPU。 这 个 七 英寸 的 平板 对 本 书 中 的 例子 支持 得 很 好 。 图 12-1 是 Futurgo 概念 车 网 站 
(参见 第 10 章 ) 运行 在 Kindle Fire HDX 中 的 Amazon Silk 浏览 器 上 的 截图 。 注 意 ， 它 
看 起 来 和 第 10 章 中 桌面 版 的 例子 一 样 。 手 指 在 canvas 区 域 请 动 来 旋转 Futurgo， 用 两 个 
手指 在 canvas 区 域 捏 合 来 缩放 模型 ， 点 击 Interior 和 LTD Racing 标签 来 开启 动画 ， 点 击 
Futurgo 车 身 的 一 部 分 来 弹出 浮 层 。 它 的 性 能 很 不 错 ， 对 于 一 个 超级 轻 的 七 英寸 手持 设备 
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12-1: 运行 在 Kindle Fire HDX 上 的 Futurgo 应 用 
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我 并 没有 做 任何 附加 工作 来 让 这 个 例子 在 Kindle 设备 上 运行 ， 这 不 足 为 奇 。 我 只 是 将 
URL 输入 到 浏览 器 中 ， 等 待 儿 秒 ， 页 面 就 完全 泻 染 并 动 起 来 了 。 像 这 样 的 移动 设备 没有 鼠 
标 ， 所 以 为 了 实现 交互 ， 我 需要 添加 触摸 输入 的 支持 。 


12.2.1 增加 触摸 支持 


移动 HIML5 浏览 器 会 自动 处 理 页 面 元 素 的 触摸 输入 ， 生 成 合适 的 mouseclick 事件 。 
Futurgo 页 面 右边 的 标 和 可 以 正常 工作 ， 能 够 触发 打开 车 和 旋转 轮子 的 动画 。 但 是 ， 浏 览 
器 不 会 自动 为 Canvas 元 素 生 成 鼠标 事件 ， 我 们 需要 自己 通过 处 理 浏览 器 触摸 事件 (touch 
event) 来 添加 支持 。 


随 着 触 屏 界面 在 移动 设备 上 的 流行 ， 触 措 事 件 被 添加 到 了 Web 浏览 器 中 。 它 们 有 点 类 似 鼠 
标 事件 ， 因 为 支持 相对 于 客户 端 页 面 和 屏幕 的 x 和 y 坐标 。 但 是 ， 它 们 还 支持 一 些 不 同 
的 信息 ， 尤 其 是 因为 大 多 数 设备 支持 同时 多 点 触摸 (例如 每 个 手指 都 触摸 屏 莫 )， 触 摸 事 
件 包含 了 不 同 触 措 点 各 自 的 信息 。 

浏览 器 还 定义 了 新 的 事件 类 型 ， 表 12-2 做 了 概括 。 

表 12-2， 浏览 器 触摸 事件 

和 描 述 

touchstart 当 检 测 到 触摸 的 时 候 触 发 《比如 当 一 个 手指 第 一 次 触摸 屏幕 ) 

touchmove 当 触 摸 位 置 变化 的 时 候 触发 〈 比 如 当 一 个 手指 在 屏幕 中 移动 ) 

touchend 当 触 摸 结束 的 时 候 触 发 (比如 手指 从 屏幕 上 移 开 ) 


touchcancel 当 触 摸 移 到 屏幕 的 触 措 感应 区 外 面 ， 或 触摸 被 其 他 特殊 实现 行为 中 断 (比如 太 多 触摸 点 ) 
时 触发 


























































































































完整 的 浏览 器 触摸 事件 规范 可 以 在 W3C 推荐 页 面 (http://www.w3.org/TR/ 
2013/REC-touch-events-20131010/) 找到 。 


注意 ， 在 有 些 浏 览 器 中 对 触摸 事件 的 支持 还 在 开发 中 ， 你 可 能 会 遇 到 特定 浏 
览 器 的 问题 。 比 如 桌面 版 的 Internet Explorer 在 支持 触摸 的 PC 上 支持 触摸 事 
件 ， 但 它们 需要 不 同 的 DOM 事件 类 型 和 特定 浏览 器 的 CSS 属性 (-ms- 前 
级 ) 来 让 它 正常 工作 。 具 体 细节 请 查询 你 目标 浏览 器 的 开发 者 文档 。 
























































为 了 给 Futurgo 应 用 添加 触摸 支持 ， 我 们 需要 实现 前 面 所 提 到 的 事件 的 处 理 函 数 。 我 们 需 
要 把 它们 添加 到 Vizi 查看 器 所 使 用 的 模型 控制 器 中 ， 来 支持 模型 的 旋转 和 缩放 。 我 们 还 想 
实现 Futurgo 应 用 自身 的 触摸 事件 支持 ， 来 处 理 用 户 触摸 车 身 的 一 部 分 。 

1. 在 查看 器 中 实现 基于 触摸 的 模型 旋转 

桌面 Futurgo 应 用 的 一 个 良好 特性 是 能 使 用 鼠标 旋转 模型 ， 并 使 用 鼠标 滚轮 和 触摸 板 来 缩 
放 。 因 为 这 些 输入 产 在 移动 设备 上 都 没有 ， 所 以 我 们 将 使 用 触摸 来 替代 。 

回忆 一 下 第 10 章 Futurgo 应 用 使 用 Vizi.Viewer 对 象 以 及 它 的 内 建 模型 控制 器 ， 来 支持 用 
鼠标 操作 模型 。 我 们 将 修改 模型 控制 器 来 使 用 触摸 输 入。 这 个 类 的 源码 可 以 在 Vizi 源码 文 
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件 的 src/controllers/orbitControls.js 中 找到 。 
首先 ， 我们 添加 touchstart 的 事件 监听 函数 ， 它 将 调用 onTouchstart() 方法 。 


this.domElement.addEventListener( 'touchstart', onTouchStart, 
false ); 


其 他 事件 监听 函数 也 随后 都 添加 到 onTouchstart() 中 了 。( 注 意 变量 scope 是 JavaScript 的 
闭 包 范 围 变 量 ， 保 存 的 是 控制 对 象 的 this 值 。) 


scope.domELement .addEventListener( 'touchmove', onTouchMove, 
false ); 

scope.domElement.addEventListener( 'touchend', onTouchEnd, 
false ); 


现在 我 们 可 以 处 理 触摸 事件 了 。 例 12-1 展示 了 onTouchstart() 的 代码 。 我 们 基本 上 就 是 
伪造 了 一 个 鼠标 按 下 (mouse down) 事件 ， 并 调用 对 应 的 事件 处 理 图 数 onMouseDown()， 
onMouseDown() 是 用 户 鼠 标 事 件 的 处 理 。 每 个 触摸 输入 源 的 细节 存储 在 事件 的 touches 列表 
中 ， 它 是 一 个 Touch 对 象 的 数组 。 我 们 这 里 假定 只 有 一 个 触摸 ， 忽 略 列表 中 除了 第 一 个 对 
象 以 外 的 其 他 对 象 。 对 象 的 值 被 复制 到 了 我 们 伪造 的 鼠标 事件 中 ， 并 传 给 onMouseDown( ) ， 
然后 这 个 事件 被 当成 一 个 普通 鼠标 按 下 事件 来 处 理 。 


用 Mr. Spock 的 话 来 说 :“ 原 始 但 有 效 。 


例 12-1: 通过 合成 一 个 鼠标 按 下 事件 来 处 理 触摸 开始 
// 合成 一 个 鼠标 左 键 事件 
var mouseEvent = { 

'type': "mousedown ' ， 
'view': event .View， 
"bubbLes ' : event.bubbles, 
'cancelable': event.cancelable, 
'detail': event.detail, 
'screenX': event.touches[0].screenX， 
'screenY': event.touches[0].screenY， 
'clientX': event.touches[0].cLientX， 
'clientY': event.touches[0].clienty, 
'pageX': event.touches[0].pageX， 
"pageY' : event.touches[0].pageY, 
















































































"button ' : 0， 
"preventDefauLt' : function() {} 
}; 


onMouseDown (mouseEvent); 


我 们 用 类 似 的 简单 技巧 实现 了 touchmove 和 touchend， 不 同 的 是 我 们 使 用 了 event. 
changedTouches 数组 。changedTouches 包含 任意 触摸 输入 源 移 动 时 的 新 值 。 我 们 同样 全 部 
假定 是 一 个 触摸 操作 。 这 是 没 问 题 的 ， 我 们 对 于 多 点 触摸 有 其 他 方案 。 有 具体 细节 可 以 查看 
onTouchMove() 和 onTouchEnd() 方法 的 代码 。 


2. 实现 基于 多 点 触摸 的 缩放 
大 部 分 设备 支持 多 个 触摸 输入 ， 或 者 说 支持 多 点 触摸 操作 ，。 一 个 常用 的 多 点 触摸 交互 方式 
是 使 用 两 根 手指 “捏合 ”屏幕 ， 即 将 两 根 手 指 移 近 和 移 远 来 缩小 或 放大 视图 。 我 们 将 在 
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Vizi 模型 控制 右上 进行 实现 。 


开发 多 点 触摸 比 开 发 单 点 触摸 更 复杂 一 些 ， 因 为 我 们 需要 分 别 跟踪 多 个 触摸 输入 的 移动 。 
触摸 对 象 在 事件 touches 或 changedTouches 列表 中 包含 一 个 identifier 属性 ， 它 是 触摸 唯 
一 的 id， 在 它 的 周期 (从 touchstart 到 touchmove， 直 到 touchend 或 touchcanceL) 里 保 


持 不 变 。 


让 我 们 来 看 一 下 代码 。 在 onTouchstart() 的 开始 部 分 ， 我 们 检测 是 否 有 一 个 以 上 触摸 。 
如 果 是 的 话 ， 我 们 将 它 当 成 捏合 (pinch-to-zoom) 手势 ， 而 不 是 模型 旋转 。 我 们 使 用 
touches 数组 的 前 两 项 来 计算 触摸 间 的 距离 ， 保 存 它 们 到 touchDistance 属性 中 。 我 们 将 在 
后 面 使 用 它 来 确定 是 向 内 挤 压 (pinch inward) 还 是 向 外 挤 压 (pinch outward) 。 
if ( event.touches.Length > 1 ) 攻 
scope.touchDistance = caLcDistance(event.touches[0]， 
event .touches[1]); 
scope.touchId0 = event.touches[0].identifier; 
scope.touchId1 = event.touches[1].identifier; 


} 


我 们 还 分 别 在 属性 touchId9 和 touchId1 里 保存 了 两 个 触摸 对 象 的 字符 串 标 识 符 。 我 们 这 
么 做 是 因为 当 接 下 来 接收 到 touchmove 事件 时 ， 我 们 必须 确定 哪个 触摸 对 象 移动 了 ， 因 为 
并 不 能 保证 触摸 对 象 在 新 的 changedTouches 事件 列表 中 保存 的 顺序 和 最 初 的 touchstart 事 
件 是 一 样 的 。 唯 一 能 区 分 每 个 触摸 对 象 的 信息 就 是 它 的 identifier 属性 ， 所 以 我 们 保存 下 
来 供 后 续 使 用 。 


现在 可 以 处 理 touchmove 了 ， 请 看 例 12-2。 在 onTouchMove() 方法 中 ， 我 们 首先 确定 是 
否 有 多 点 触摸 事件 。 如 果 有 ， 我 们 在 changedTouches 中 查找 之 前 保存 的 两 个 标识 符 : 
touchId9 和 touchId1。 有 这 些 标识 符 的 触摸 对 象 是 我 们 所 关心 的 。 一 旦 获得 了 它们 ， 我 们 
就 可 以 使 用 辅助 函数 calcpistance() 计算 新 的 距离 。 我 们 将 它 和 之 前 的 距离 相 减 : 如 果 结 
果 是 正 的 ， 说 明 我 们 两 根 手 指 的 距离 远 了， 于 是 我 们 拉 近 相机 来 让 模型 看 起 来 更 大 ， 如 果 
结果 是 负 的 ， 说 明 我 们 两 根 手指 的 距离 更 近 了 ， 于 是 缩小 模型 。 


例 12-2: 使 用 多 点 触摸 处 理 一 个 捏合 操作 
if ( event.changedTouches.length > 1 ) { 
var touch0 = null; 
var touch1 = null; 
for (var i = 0; i < event.changedTouches.length; i++) { 
if (event.changedTouches[i].identifier == 
scope.touchId0) 
touch0 = event.changedTouches[i]; 
else if (event.changedTouches[i].identifier == 
scope.touchId1) 
touch1 = event.changedTouches[i]; 
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} 
if (touchO && touch1) { 
var touchDistance = calcDistance(touch0, touch1); 
var deltaDistance = touchDistance - 
scope.touchDistance; 
if (deltaDistance > 0) { 
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scope.zoomIn( ) ; 


else if (deltaDistance < 0) { 
scope.zoomOut(); 


3 


scope.touchDistance = touchDistance; 
} 


让 我 们 看 一 下 距离 是 如 何 计算 的 。 例 12-3 展示 了 calcDistance() 的 全 部 代码 。 计 算 很 简 
单 ， 使 用 经 典 的 毕 达 哥 拉 斯 (Pythagorean) 距离 公式 。 


例 12-3: 计算 捏合 的 距离 
function calcDistance( touch9，touch1 ) { 
var dx = touchi.clientX - touch0.cLientX; 
var dy = touchi.clientY - touch0.cLientY; 
return Math.sqrt(dx * dx + dy * dy); 





} 


3. 关闭 页 面 的 用 户 缩放 

为 了 正确 实现 我 们 的 触摸 ， 还 有 一 个 很 小 但 非常 重要 的 细节 。 默 认 情 况 下 ， 移 动 Web 浏览 
器 人 允许 用 户 使 用 触摸 来 缩放 页 面 内 容 。 但 是 ， 这 会 干扰 我 们 使 用 捏合 来 缩放 3D 内 容 的 能 
力 。 好 消息 是 有 办 法 在 标签 中 关闭 这 个 功能 。 通 过 包含 以 下 HTMLS5 meta 标签 ， 我 们 可 以 
防止 用 户 缩放 页 面 (请 看 Chapter 12/futurgo.html) : 





























<meta name="viewport" 
content="width=device-width, initial-scale=1.0, user-scalable=no"> 


4. 为 Futurgo 模 型 添加 Vizi .picker 触 摸 事件 
桌面 版 的 Futurgo 有 一 个 非常 好 的 功能 : 对 于 车 模型 不 同 部 分 的 信息 标注 。 移 动 鼠 标 慧 停 
到 车 上 一 部 分 ( 挡 风 玻璃 、 车 身 、 轮 胎 ) 的 时 候 ， 会 弹出 一 个 关于 那个 部 分 更 多 信息 的 
DIV。 但 是 ， 移 动 设备 没有 鼠标 ， 所 以 基于 鼠标 悬 停 是 不 能 工作 的 。 作 为 砍 代 ， 我 们 可 以 
在 模型 的 不 同 部 分 被 触摸 时 弹出 标注 。Vizi.Picker 包含 了 对 触摸 事件 的 支持 。 请 看 文件 
Chapter 12/futurgo.js 的 第 和 4 行 ， 我 们 添加 了 基于 触摸 触发 标注 的 代码 。 注 意 例 12-4 中 粗 
体 标 出 的 行 。 
例 12-4: 为 Futurgo 模型 添加 Vizi.Picker 触摸 事件 
// 为 所 有 的 车 窗 添加 进入 时 淡出 的 行为 
var that = this; 
scene.map(/windows_front|windows_rear/, function(o) { 
var fader = new Vizi.FadeBehavior({duration:2, opacity:.8}); 
o0.addComponent(fader); 
setTimeout(function() { 
fader .start(); 
}, 2000); 

















var picker = new Vizi.Picker; 

picker .addEventListener("mouseover", function(event) { 
that.onMouseOver("glass", event); }); 

picker .addEventListener("mouseout", function(event) { 
that.onMouseOut("glass", event); }); 
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picker .addEventListener("touchstart", function(event) { 
that.onTouchStart("glass", event); }); 

picker .addEventListener("touchend", function(event) { 
that.onTouchEnd("glass", event); }); 

0.addComponent(picker ); 


的 ; 


触摸 事件 的 处 理 函 数 很 简单 ， 我 们 再 次 使 用 了 发 送 到 一 个 现 有 鼠标 处 理 函 数 这 一 简单 的 
技巧 。 
Futurgo.prototype.onTouchEnd = function(what, event) { 


console.log("touch end", what, event); 
this .onMouseOver (what, event); 





谢 天 谢 地 ，onMouseover() 中 不 需要 一 个 真实 的 DOM 鼠标 事件 (Mouse- 
Event)， 不 然 这 段 代 码 会 失效 。 我 们 这 里 做 了 简单 的 处 理 ， 但 不 要 在 你 的 产 
品 代码 中 做 类 似 的 事情 ， 不 然 你 会 在 后 面 不 经 意 间 发 现 bug。 


























12.2.2 ”在 桌面 版 Chrome 上 调试 移动 功能 


一 旦 我 们 学 会 了 如 何 处 理 触 摸 事 件 ， 就 很 容易 在 Vizi 核心 和 Futurgo 应 用 中 添加 对 它们 的 
支持 。 其 至 是 添加 多 点 触摸 来 支持 捏 放 缩放 ， 虽 然 有 些 细 市 问题 ， 但 并 不 高 深 。 尽管 上 面 
的 事情 看 起 来 不 算 难 ， 但 我 们 是 人 类 ， 时 常会 犯错 ， 所 以 我 们 需要 能 调试 和 测试 我 们 添加 
的 新 功能 。 

表 12-1 中 列 出 的 每 个 移动 HIML5 平台 都 提供 了 在 设备 上 连接 调试 器 调试 应 用 的 不 同方 
法 。 有 些 系统 做 得 不 错 ， 而 有 些 从 我 的 体验 上 看 ， 用 起 来 非常 痛 苗 。 尽 管 如 此 ， 你 有 时 候 
仍 需 直面 那些 操作 流程 。 我 们 不 会 讨论 每 个 不 同 的 工具 ， 请 查询 你 目标 平台 的 文档 来 获得 
更 多 信息 。 


与 此 同时 ， 如 有 果 在 将 应 用 迁移 到 设备 前 ， 能 使 用 应 用 的 桌面 版 本 来 进行 一 些 调试 就 好 了 。 
幸运 的 是 ， 桌 面 版 Chrome 的 调试 工具 提供 了 模拟 某 些 移动 功能 的 能 力 ， 比 如 触摸 事件 。 
当 触摸 事件 模拟 开局 的 时 候 ， 你 可 以 使 用 鼠标 来 触发 触摸 事件 ， 以 下 是 快速 的 操作 步骤 。 


(在 Chrome 浏览 器 中 打开 你 的 应 用 。 

(2) 打开 Chrome 调试 工具 。 

(3) 点 击 右 下 角 的 Settings (设置 ) 图 标 ( 呈 齿轮 状 )， 你 将 会 看 到 一 个 用 户 界面 面板 在 调试 
区 域 中 弹出 。 如 图 12-2 所 示 。 相 关 的 输入 区 域 被 圈 了 起 来 。 

(4) 选择 设置 区 域 的 (最 左边 一 栏 ) 的 Overrides 〈 履 盖 ) 标签 。 

(5) 勾 选 Overrides 标签 栏 的 Enable 复 选 框 。 

(6) 癌 下 演 动 ， 直 到 你 看 到 右边 详情 区 域 的 “Emulate touch events”。 勾 选 那个 复 选 框 。 

(07) 现在 你 可 以 点 击 右 上 角 的 关闭 来 关闭 面板 。 当 然 ， 你 需要 保持 调试 工具 开启 。 
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Settings Overrides 
A Enabie Enable on DevTools startup 
Overrides 
User Agent 
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Screen resolution: 1440 x 900 
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Fl in window 


Override Ceolocation 


Ceolocation Position: Lat = 


Emulate position unavailable 


Override Device Orientation 


a oF 0 


加 Emulate touch events 








图 12-2: 在 桌面 版 Chrome 中 开启 触摸 事件 模拟 


注意 ，Chrome 触摸 事件 模拟 只 有 在 调试 工具 打开 的 时 候 才 有 效 。 当 关闭 调 

















试 工具 后 ， 你 将 失去 触摸 事件 覆盖 。 





[el 


现在 ， 浏 览 器 
往 你 的 应 用 。 请 看 图 12-3。 注 意 窗口 右上 角 (在 
形 区 域 ， 它 告诉 我 们 事件 履 盖 已 经 开启 。 现 在 使 
touchstart 和 touchend 事件 触发 时 写 到 控制 台 的 消 





触摸 事件 模拟 已 经 在 Chrome 中 开启 了 。 鼠 标 事件 将 转换 成 触摸 事件 并 发 


图 中 国 起 来 了 ) 有 红色 文本 的 黑色 拢 





用 鼠标 点 击 Futurgo， 我 们 可 以 看 到 当 


息 ， 我 们 将 它们 在 控制 台 窗 口中 圈 了 起 


来 。 这 个 简单 的 能 力 是 在 应 用 迁移 到 移动 设备 前 ， 调 试 触摸 代码 的 好 方法 。 不 过 ， 只 支持 


单 次 触摸 模拟 。 
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图 12-3: 在 桌面 版 Chrome 中 调试 Futurgo 的 触摸 事件 
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12.3 创建 Web 应 用 


有 时 候 ， 你 想 将 你 的 作品 打包 为 一 个 完成 的 应 用 部 署 到 设备 上 。 或 者 你 想 使 用 应 用 内 购 
买 ， 或 其 他 为 应 用 而 准备 但 在 浏览 器 中 不 支持 的 平台 功能 。 或 者 你 只 是 想 在 用 户 的 设备 上 
安装 一 个 图 标 ， 使 得 他 能 直接 打开 你 的 应 用 。 大 部 分 新 的 移动 设备 平台 支持 用 JavaSeript 
和 HTML5 开发 ， 然 后 将 结果 打包 为 一 个 应 用 成 品 或 Web 应 用 。 


12.3.1 Web 应 用 开发 和 测试 工具 


使 用 HTML5 创建 Web 应 用 的 开发 工具 因 平 台 而 异 ， 每 个 平台 都 有 自己 的 测试 、 调 试 和 打 
包 发 布 应 用 的 方法 。 

Amazon 为 在 Kindle 设备 上 的 Amazon Fire OS 提供 了 一 个 Web App Tester 测试 工具 。Fire 
OS 是 Amazon 为 Kindle Fire 设备 开发 的 操作 系统 ， 其 基于 Android。Web App Tester 是 


一 个 Kindle Fire 应 用 ， 在 Amazon 商店 中 有 提供 。 详 细 信 息 可 以 访问 https://developer. 
amazon.com/sdk/webapps/tester.html。Web App Tester 如 图 12-4 所 示 。 
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图 12-4: Amazon Web App Tester 
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这 个 工具 的 使 用 非常 简单 : 在 你 的 页 面 中 输入 一 个 URL， 它 就 会 以 全 屏 的 方式 来 加 载 这 个 
页 面 。 当 你 首次 输入 这 个 URL 之 后 ， 它 就 会 被 保存 在 测试 商店 中 以 便 再 次 载 入 。 


之 前 提 到 过 ， 创 建 Web 应 用 的 开发 者 工具 因 平 台 而 异 。 其 至 对 于 不 同 厂 商 版 
本 的 Android 也 是 如 此 : 尽管 Kindle Fire OS 是 基于 Android 的 ， 但 Amazon 
添加 了 大 量 功能 ， 有 一 系列 自 定义 的 工具 来 开发 、 测 试 和 打包 。 对 于 其 他 基 
于 Android 的 系统 ， 请 查询 厂商 的 文档 或 查看 Android Web 应 用 开发 者 页 面 
(http://developer.android.com/guide/webapps/index.htm!l) 。 






























































12.3.2 ”打包 成 Web 应 用 来 发 布 

一 旦 你 调试 和 测试 完 你 的 应 用 ， 就 可 以 发 布 它 了 。 同 样 ， 每 个 平台 的 发 布 流程 也 都 不 同 。 
Amazon 提供 了 移动 应 用 分 发 入 口 ， 人 允许 注册 的 Amazon 开发 者 创建 Kindle Fire 和 Android 
应 用 来 发 布 。 通 过 这 个 入 口 发 布 你 的 应 用 需要 经 过 几 个 步骤 。 第 一 步 是 为 应 用 创建 一 个 清 
单 文件 (manifest file)， 这 是 一 个 包含 关于 应 用 内 容 及 功能 的 信息 的 文件 。 下 面 是 一 个 示 
例 ， 是 一 个 非常 简单 的 Amazon Web 应 用 的 清单 文件 。 唯 一 需要 的 字段 是 verification_ 
key， 它 是 在 Amazon 发 布 流程 中 生成 的 值 。 其 他 关于 应 用 的 元 数据 ， 比 如 图 标 和 描述 ， 在 
提交 应 用 的 时 候 在 线 提交 ， 而 不 在 manifest 文件 中 。 


Amazon 清单 文件 的 完整 信息 可 以 在 https://developer.amazon.com/sdk/webapps/manifest.html 
中 找到 。 


€ 






































"verification key": 
"insert your verification key from the App File(s) tab", 
"launch_path": "index.html", 
"permissions": [ 
"iap", 
"geolocation", 
"auth" 
]， 


"type": "web", 

"version": "0.1a", 

"Last_update": "2013-04-08 13:30:00-0800"，, 
"created_by": "webappdev" 


} 


作为 对 比 ，Firefox OS 的 Firefox 市 场 有 一 个 不 同 的 应 用 分 发 流程 ， 以 及 不 同 语法 的 清单 文 
件 。 下 面 是 一 个 简单 的 例子 : 


{ 


"name": "Your_Application_ Name_Here", 
"description": "Your Application Description Here", 
"version": 1， 

"installs_allowed from": ["*"], 














"default_locale": "en", 
"launch_path": "/index.html", 
"fullscreen": "true", 
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"orientation": ["landscape"], 
"TEONS -六 

"128": "/images/icon-128.png" 
}， 
"developer": { 

"name": "Your Name Here", 

"urL" : "http://your.company.url.com" 

} 
} 


在 Firefox 的 清单 文件 中 ， 我 们 列 出 了 包 中 的 文件 、 一 个 应 用 图 标 、 一 个 应 用 名 称 和 描述 ， 
以 及 一 些 开 发 者 信息 。 在 https://developer.mozilla.org/en-US/Apps/Developing/Packaged_apps 
上 查找 更 多 关于 Firefox OS 应 用 创建 的 信息 。 


12.4 开发 原生 /HTML5 混 合 应 用 


HTML5 和 移动 平台 API 是 对 立 的 两 方 。 我 们 可 以 想象 不 远 的 未 来 ， 任 意 应 用 都 可 以 先 在 
HTML5 中 开发 ， 然 后 简单 地 使 用 厂商 的 打包 技术 发 布 到 不 同 的 移动 平台 上 。 然 而 ， 这 个 
未 来 还 没 到 来 。 平 台 间 还 有 不 同 ， 尤 其 是 3D 还 有 差距 。 就 像 前 面 我 们 说 过 的 ，WebGL 已 
经 在 几乎 所 有 移动 浏览 器 中 得 到 了 支持 ， 但 并 未 完全 普及 。 
因为 这 样 或 那样 的 原因 ， 你 需要 考虑 使 用 某 种 在 目标 设备 上 开启 WebGL 的 技术 ， 它 通过 
提供 原生 库 或 适配器 来 让 JavaScript 访问 WebGL API。 使 用 一 种 适配器 技术 ， 你 可 以 在 打 
包 的 应 用 中 将 JavaScripVHTML 与 原生 代码 相 结合 ， 变 成 一 个 混合 应 用 ， 鱼 和 能 掌 兼 得 。 
开发 者 或 许 会 因为 如 下 原因 之 一 而 转向 混合 方式 。 
。 缺乏 浏览 器 支持 
iOS 是 实现 WebGL 的 阻碍 ， 而 且 是 一 个 大 的 阻碍 。 对 于 类 似 iOS 及 其 他 不 支持 WebGL 
的 移动 平台 (比如 早期 版 本 的 Android) 来 说 ,混合 方案 提供 了 一 种 方式 ， 允 许 开发 者 
使 用 JavaScript 基于 WebGL API 开发 3D 应 用 ， 并 发 布 到 目标 平台 。 
。 性 能 
适 配 库 通常 会 提供 比 基 于 浏览 器 WebGL 的 同等 应 用 略 好 的 性 能 。 这 有 两 个 原因 。 首 
先 ， 它 们 可 以 提供 一 个 优化 并 调 优 的 JavaScript 虚拟 机 。 基 次， 它们 可 以 避免 浏览 器 安 
全 模型 所 添加 的 WebGL 安全 层 一 一 这 对 于 基于 Web 的 应 用 是 必需 的 ， 但 对 于 原生 应 
用 则 不 是 。 
。 发 布 为 一 个 应 用 
如 果 目 的 是 将 应 用 成 品 发 布 为 移动 应 用 ， 而 不 是 基于 浏览 器 的 站 点 ， 混 合 方案 值得 一 
试 。 有 些 混 合 方案 甚至 允许 JavaScript 使 用 在 纯 基 于 浏览 器 的 应 用 中 没有 的 功能 ， 比 如 
应 用 内 购买 、 原 生 广 告 SDK、 消 息 推送 。 
近 几 年 来 ， 出 现 了 几 种 支持 混合 方案 的 适 配 技术 。 尽 管 它们 中 的 大 部 分 提供 了 硬件 加 速 
的 Canvas 及 其 他 特殊 功能 (其 中 最 著名 的 是 Adobe 的 PhoneGap， 网 址 是 http://phonegap. 
com/) ， 但 只 有 少数 混合 框架 包括 了 对 WebGL 的 支持 。 最 值得 注意 的 两 个 是 CocoonJS 和 
Ejecta。 尽 管 这 两 个 工具 试图 解决 相同 的 问题 ， 但 它们 的 的 方法 却 很 不 同 ， 以 下 是 一 个 简 
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要 的 比较 。 

。 CocoonJS (http://www.ludei.com/tech/cocoonjs) 
CocoonJS 可 以 运行 在 Android 和 iOS 上 。 它 提供 了 一 个 简单 的 应 用 容器 来 运行 HTML5 
和 JavaScript 代码 ， 隐 藏 了 底层 系统 的 细节 。 它 提供 了 对 Canvas、WebGL、Web 
Audio、Web Sockets 等 的 实现 。CocoonJS 还 有 一 个 云端 的 项 目 编译 系统 ， 所 以 你 要 做 
的 仅仅 是 登录 和 构建 你 的 项 目 。 开 发 者 不 需要 了 解 如 何 使 用 原生 平台 工具 ， 比 如 ioS 的 
Xcode， 来 创建 原生 应 用 。CocoonJS 是 闭 源 项 目 ， 由 它 位 于 旧金山 的 开发 商 Ludei 严格 
控制 。 

。 Ejecta (http://impactjs.com/ejecta) 
Ejecta 是 一 个 开源 库 ， 提 供 了 许多 和 CocoonJS 一 样 的 功能 ， 但 只 支持 10OS。Ejecta 诞生 
自 InpactUS ， 一 个 HTML5 游戏 引 敬 项 目 。Ejecta 更 加 DIY， 需 要 开发 者 对 Xcode 和 原 
生平 台 API 有 相当 多 的 了 解 。 


尽管 Ejecta 是 一 个 开源 项 目 ， 但 它 依赖 iOS 特性 及 Xcode， 因 而 不 适合 本 书 。 我 们 将 使 用 
CocoonJS 来 开发 一 个 混合 应 用 。 


12.4.1 CocoonJS: 一 种 为 移动 设备 构建 HTML 游 戏 及 应 
用 的 技术 


CocoonJS 是 一 种 让 HTML5 混合 应 用 运行 在 移动 设备 上 的 适配器 技术 。 它 作为 一 个 
HTML5 原生 封装 来 工作 : 应 用 或 游戏 是 以 一 个 原生 应 用 来 执行 的 ， 在 其 中 执行 JavaScript 
和 HTML。CocoonJS 可 以 运行 在 iOS 和 Android 上 ， 在 这 些 平 台 和 不 同 设备 上 提供 了 一 臻 
的 环境 。 

CocoonJS 允许 开发 者 提供 一 个 HTML 文件 及 关联 的 JavaScript 代码 ， 使 用 标准 2D 和 
WebGL 来 全 屏 泻 染 2D 或 3D Canvas， 还 支持 Web Audio、 图 片 加 载 、Ajax 开发 的 
XMLHttpRequest、WebSockets。CocoonJS 实现 了 原生 、 硬 件 加 速 的 API， 并 提供 了 一 个 自 
定义 的 JavaScript 虚拟 机 (由 Ludei 调 优 ) 来 提供 更 好 的 性 能 。 图 12-5 展示 了 Futurgo 作 
为 全 屏 原 生 应 用 运行 在 Apple iPad 4 上 的 截图 。 
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图 12-5: Futurgo 作为 一 个 原生 iPad 应 用 在 运行 ， 基 于 Ludei CocoonJS 开发 


为 了 让 开发 和 测试 更 简单 ，CocoonJS 提供 了 一 个 Launcher 应 用 ， 人 允许 开发 者 载 入 一 个 
URL 来 预览 效果 ， 或 者 向 Launcher 提供 一 个 包含 所 有 内 容 的 ZIP 压缩 包 来 在 设备 上 运行 。 
CocoonJS Launcher， 如 图 12-6 所 示 ， 可 以 从 苹果 和 Android 应 用 商店 中 下 载 。 为 了 测试 你 
的 应 用 ， 可 以 点 击 Your App 按钮 ， 然 后 在 文本 窗口 中 输入 测试 文件 的 URL， 或 者 打开 使 
用 iTunes 或 Android SDK 工具 上 传 到 Launcher 中 的 ZIP 文件 。 详 细 信息 请 参考 CocoonJS 
文档 。 
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12-6: CocoonJS Launcher 的 主屏 幕 
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当 你 使 用 Launcher 预览 和 测试 应 用 后 ， 可 以 使 用 Ludei 基于 云 的 服务 来 将 它 编 译 为 原生 应 
用 : 上 传 应 用 文件 ， 几 分 钟 后 你 就 可 以 下 载 一 个 能 在 iD0S、Amazon、GooglePlay 及 其 他 应 
用 商店 上 发 布 的 最 终 包 。 


12.4.2 ”使 用 CocoonJS 组 装 应 用 


尽管 CocoonJS 的 开发 者 声称 可 以 用 它 来 构建 任意 类 型 的 原生 /HTML5 应 用 ， 但 他 们 目前 
重点 关 广 的 是 开发 高 性 能 游戏 。 为 此 ， 让 我 们 开发 一 个 非常 简单 的 游戏 来 展示 如 何 构建 一 
个 应 用 。 这 更 像 是 一 个 游戏 演示 而 不 是 完整 游戏 ， 主 要 是 用 于 展现 流程 。 在 我 们 学 习 应 用 
的 CocoonJS 细节 前 ， 先 看 看 游戏 的 桌面 版 本 。 然 后 我 们 会 使 用 CocoonJS 来 改造 它 。 

在 你 的 浏览 器 中 打开 文件 Chapter 12/omegacity/omegacity.html， 你 会 看 到 如 图 12-7 所 示 的 
开始 画面 。 这 个 模型 看 起 来 眼熟 ， 它 是 使 用 第 8 章 的 示例 程序 所 加 载 的 gITF“ 虚 拟 城市 ” 
场景 (Chapter 8/pipelinethreejsgltfscene.html) 。 
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12-7: Omega City 游戏 开始 画面 一 一 2D 素材 由 GameSalad (http:/www.gamesalad.com/) 设 
计 ， 虚拟 城市 场景 来 自 3DRT (http://3drt.com/store/free-downloads/33-sci-fi-skyscrapers- 
collection.html) ， 声 音 来 自 FreeSound (http://www.freesound.org/) ;所 有 版 权 保留 


这 个 了 不 起 的 模型 是 从 3DRT (http://www.3drt.com/) 上 购买 的 。 这 里 展示 的 
demo 是 我 们 同 奥斯汀 的 GameSalad (http://www.gamesalad.com/) 公司 合作 
开发 的 。 该 公司 发 布 过 一 个 易于 使 用 的 2D 游戏 创建 工具 ， 可 以 用 于 HTML 
及 移动 游戏 。 记 住 ， 像 本 书 发 布 的 其 他 模型 一 样 ， 这 个 模型 是 有 版 权 保护 
的 ， 因 此 你 不 能 在 你 自己 的 应 用 中 使 用 ,或 者 用 于 学 习 本 书 外 的 其 他 用 途 ， 
除非 你 购买 自己 的 模型 。 











欢迎 来 到 Omega 市 ， 银 河 的 边防 哨所 。 你 和 你 的 小 分 队 是 人 类 对 付 外 星人 进攻 的 最 后 希 
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望 。 为 了 拯救 这 个 城市 …… 你 或 许 不 得 不 毁灭 它 | 

点 击 内 烁 的 START 标签 来 进入 游戏 ， 它 会 把 你 带 到 图 12-8 所 示 的 主 界面 。 飞 船 是 自动 驾 
驶 的 ， 你 只 能 发 射 武 器 。 按 下 键盘 的 向 上 箭头 来 发 射 激光 ， 你 会 看 到 蓝 色 的 激光 会 聚 到 视 
图 中 央 。 按 下 空格 键 来 发 射 导弹 。 在 通电 声音 后 ， 导 弹 会 从 飞船 中 心 发 射 ， 当 它 击 中 目标 
的 时 候 ， 会 在 一 道 绿 色 闪 光 中 爆炸 。 这 一 简单 的 例子 只 是 设计 用 来 展示 如 何 开 发 类 似 的 游 
戏 应 用 ， 让 我 们 体验 一 下 使 用 CocoonJS 来 进行 混合 iOS 开发 。 
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图 12-8: 运行 在 桌面 的 Omega City 游戏 演示 


1. 创建 主 视图 和 覆盖 视图 

你 或 许 已 注意 到 ，Futurgo 运行 在 Kindle Fire HDX 上 的 纯 HTML5 版 本 (图 12-1)， 与 使 
用 CocoonJS 运行 在 iOS 上 的 原生 版 本 (图 12-5) 有 微妙 的 不 同 。Kindle Fire 版 本 看 起 来 
和 桌面 版 本 一 样 ， 在 3D 模型 后 面 有 紫色 的 背景 渐变 ， 还 包含 了 网 格 线 框 ， 而 CocoonJS 
iOS 版 本 则 是 黑色 背景 。 这 是 因为 CocoonJS 不 是 一 个 完整 的 HTML5 浏览 器 和 合成 引擎 ， 
而 是 一 个 原生 实现 的 Canvas 元 素 ， 用 于 让 JavaScript 开发 者 可 以 开发 原生 2D 和 3D 图 形 。 
CocoonJS 可 以 解析 HTML 标签 ,但 它 忽略 大 部 分 标签 和 样式 信息 。 

CocoonJS 解析 HTML 标签 来 查找 主 canvas， 再 加 上 其 他 关联 的 JavaScript 文件 ， 但 就 这 些 
了 ， 你 不 应 该 期 望 CSS 样式 都 会 生效 。Futurgo 的 背景 图 片 是 在 CSS 中 通过 container DIV 
元 素 指 定 的 ， 而 CocoonJS 在 解析 HTML 文件 的 时 候 忽略 了 它 。 如 有 果 我 们 希望 这 样 的 背景 效 
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果 在 CocoonJS 中 生效 ， 必 须 上 自己 在 canvas 上 绘制 它 。 对 于 这 个 例子 而 言 ， 我 们 可 以 在 背景 
添加 一 个 Threejs 对 象 ， 或 者 一 个 Vizi skybox (请 查看 第 11 章 )。 对 于 我 们 这 个 简单 快速 的 
例子 来 说 不 值得 这 么 做 ， 但 如 果 需 要 的 话 ， 你 要 在 你 自己 的 应 用 中 处 理 这 个 问题 。 

尽管 CocoonJS 欠缺 在 背景 元 素 样式 方面 的 支持 ， 但 Ludei 意识 到 了 这 样 一 个 实际 问题 : 许 
多 Web 开发 者 更 想 使 用 HTML 来 布局 和 编写 游戏 的 用 户 界面 。 因 此 它 提 供 了 层 倒 第 二 个 
HTML 文件 的 方法 ， 将 第 二 个 HTML 文件 泻 染 在 一 个 WebView 窗口 中 ， 在 主 canvas 之 
上 。 这 个 方法 生效 的 关键 是 ， 将 canvas 和 覆盖 的 HTML 元 素 分 成 两 个 不 同 的 文件 或 视图 。 


12-9 并 排 显 示 了 两 个 视图 的 内 容 。 
, 


CMEEA. TTY 





















































Squa 
best hope as allens attack. 


To save the city... you may 
have to destroy it! 


START 














12-9: 左 图 为 CocoonJS 版 本 Omega City 的 canvas 视图 ; 右 图 为 对 应 的 覆盖 视图 


为 了 用 CocoonJS 来 改造 Omega City， 我 们 首先 分 离 原 始 文 件 omegacity.html 为 两 个 不 同 的 
文件 。 新 的 文件 是 index.html 和 wv.html。index.html 包含 了 主 canvas 的 代码 。wv.html 包 
含 覆 盖 视 图 的 代码 。 当 文件 分 离 后 ， 我 们 添加 Ludei 提供 的 CocoonJS 特有 的 辅助 代码 。 这 
些 文件 将 使 用 一 个 WebView 控件 来 管理 添加 覆盖 视图 ， 并 提供 让 两 个 视图 可 以 通信 的 设 
施 一 一 我 们 在 后 面 会 详细 介绍 。CocoonJS JavaScript 库 设 计 为 还 可 以 在 桌面 浏览 器 中 工作 ， 
所 以 我 们 可 以 在 桌面 Chrome 中 预览 结果 ， 然 后 再 到 CocoonJS 的 Launcher 应 用 中 测试 。 


主 canvas 视图 的 代码 可 以 在 文件 Chapter 12/omegacity-iOS/index.html 中 找到 ， 参 见 
例 12-5。 首 先 ， 载 入 一 些 CocoonJS 特有 的 文件 。 然 后 在 页 面 加 载 后 ， 构 建 将 演 染 到 
主 WebGL canvas 上 的 游戏 对 象 。 游 戏 对 象 的 源码 可 以 在 文件 Chapter 12/omegacity-iOS/ 
omegacity.js 中 找到 。 之 后 创建 一 个 对 象 来 管理 覆盖 视图 或 平视 显示 器 (HUD ，Heads-Up 
Display) ， 以 及 创建 另外 一 个 对 象 来 管理 游戏 中 的 声音 。( 注 意 HUD 类 的 proxy 前 级 ,我 
们 马上 会 介绍 它 。) 


例 12-5: CocoonJS 应 用 主 视图 代码 
<script src="./Libs/cocoon_cocoonjsextensions/Cocoon]JS.js"> 
</script> 
<script src="./Libs/cocoon_cocoonjsextensions/Cocoon]JS_App.js"> 
</script> 
<script 
src="./Tlibs/cocoon_cocoonjsextensions/Cocoon]JSs_App_ForCocoon]JS.js"> 
</script> 
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<script src="./libs/vizi/vizi.js"></script> 
<script src="omegacity.js"></script> 

<script src="omegacityProxyHUD.js"></script> 
<script src="omegacitySound.js"></script> 
<script> 


var game = null; 

var hud = null; 

var sound = null; 

var gameLoadComplete = false; 
var wvLoadComplete = false; 


var handleLoad = function() { 
var container = document.getElementById("container"); 
game = new OmegaCity({ container : container, 
loadCallback : onLoadComplete, 
loadProgressCallback : onLoadProgress, 
]); 


hud = new ProxyHUD({game : game}); 


sound = new OmegaCitySound({game : game}); 


创建 游戏 对 象 后 ， 我 们 接着 调用 CocoonJS 应 用 的 LoadInTheWebView() 方法 来 加 载 wv.html 
文件 中 的 覆盖 视图 : 


setTimeout(function() { 

















Cocoon]JS.App.onLoadInTheWebViewSucceed.addEventListener( 
function(url) { 
Cocoon]JS .App.showTheWebView(); 
Vizi.System.log("load web view succeeded."); 
wvLoadComplete = true; 


if (gameLoadComplete) { 
gameReady(); 
} 
} 
); 
Cocoon]JS .App.onLoadInTheWebViewFailed.addEventListener( 
function(url) { 
Vizi.System.log("load web view failed.", url); 
} 
); 
Cocoon]JS .App.loadInTheWebView("wv.html"); 
}, 10); 


sound.enterState("load"); 
game. load(); 





济 
紫 
深 
Es 








了 和 包含 了 所 有 的 HTML 及 JavaScript 代码 ( 例 12-6)。 请 打开 文件 Chapter 12/ 
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omegacity-iOS/wv.html 查看 。 在 HUD 对 象 的 标签 后 ， 我 们 包含 了 CocoonJS 特有 的 文件 来 
































帮助 管理 视图 。 然 后 我 们 创建 一 些 自己 的 对 象 ， 但 它们 只 用 在 用 户 界面 中 。( 这 里 也 有 代 


























理 对 象 ， 这 次 是 游戏 和 音乐 对 象 。 稍 后 进行 介绍 。) 


例 12-6: CocoonJS 应 用 的 覆盖 视图 代码 


<!--” 加 载 信息 --> 


<div id="loadStatus" style="display:none"> 


Loading... 

</div> 

<!-- Click-to-start Screen --> 

<div id="startScreen" style="display:none"> 
<!-- Logo --> 


<div id="Logowtext"></div> 

<div id="startScreenText"> 

Welcome to Omega City, the frontier outpost of the galaxy. 
You and your squad are humanity's 

last best hope as aliens attack.<br></br> 

To save the city... you may have to destroy it! 

</div> 














. <!-- 其 他 标签 --> 


<script src="./libs/cocoon_cocoonjsextensions/CocoonJS.js"> 
</script> 

<script src="./libs/cocoon_cocoonjsextensions/CocoonJS_App.js"> 
</script> 

<script 
src="./Libs/cocoon_cocoonjsextensiLons/Cocoon]JS_App_ForWebView.js"> 
</script> 

<script src="omegacityGameProxy.js"></script> 

<script src="omegacityProxySound.js"></script> 

<script src="omegacityHUD.js"></script> 

<script> 


var hud = null; 
var game = null; 
var sound = null; 


var onload = function() { 


hud = new OmegaCityHUD(); 
sound = new ProxySound(); 
game = new OmegaCityGameProxy(); 


} 








我 们 需要 再 做 一 件 事 来 将 这 两 个 视图 连接 起 来 : 保证 我 们 的 视线 可 以 穿 透 履 盖 视图 。 所 
以 我 们 修改 覆盖 视图 的 CSS， 设 置 所 有 body 元 素 的 背景 颜色 为 透明 。 请 查看 文件 Chapter 
12/omegacity-iOS/css/omegacity.css。 下 面 是 CSS : 





























body { 
background-color:rgba(0, 0, 0, 0); 
Color :#11F4F7; 
padding:0; 
margin-left:0; 
margin-right:0; 





overflow:hidden; 


} 


2. 管理 canvas 和 覆盖 视图 间 的 通信 

Cocoon]JS 提供 的 覆盖 Web 视图 是 通过 一 个 覆盖 在 主 CocoonJS canvas 视图 上 的 WebView 
控件 实现 的 。 这 个 架构 有 个 主要 的 隐 舍 之 意 : canvas 视图 的 JavaScript 虚拟 机 完全 和 
WebView 中 脚本 的 虚拟 机 分 离 。 换 句 话说 ， 这 两 个 脚本 引 敬 执行 在 不 同 的 环境 中 ， 很 可 能 
使 用 两 个 完全 不 同 的 JavaScript 虚拟 机 ! 主 视图 使 用 的 是 CocoonJS 的 虚拟 机 ， 而 在 上 面 的 
WebView 控件 使 用 的 是 来 自 平台 的 原生 脚本 引擎 。 如 果 主 视图 中 的 代码 试图 调用 覆盖 视图 
的 函数 ， 它 会 失败 ， 反 之 亦 然 。 但 是 ，Cocoon]JS 提供 了 让 两 个 视图 通过 发 送 消 息 来 进行 通 
信 的 方法 。 并 且 幸 和 运 的 是 ， 它 不 需要 我 们 理解 细节 。 

CocoonJS 提供 了 另 一 个 应 用 方法 forwardAsync()， 它 允许 我 们 在 两 个 环境 间 传 递 字符 串 。 
字符 串 会 使 用 JavaScript eval() 执行 。 所 以 调用 另 一 个 环境 的 函数 ， 只 需 创 建 一 个 那样 的 
字符 串 ， 当 求 值 (evaluate) 的 时 候 再 调用 相关 函数 。 


为 了 让 这 样 的 代码 更 可 读 ， 我 们 将 包装 每 个 forwardAsync() 调用 为 代理 (proxy) 对 象 的 
直接 方法 调用 : 调用 代理 对 象 的 方法 时 ， 内 部 会 调用 forwardAsync()， 0 
(远程 ) 环境 发 消息 。 当 消息 求 值 后， 在 另 一 个 环境 中 的 函数 被 调用 了 ， 它 最 终 可 以 调用 
远程 对 象 的 方法 。 

为 了 说 明 这 一 点 ， 让 我 们 看 一 下 点 击 START 标签 开始 游戏 的 代码 。 这 个 代码 在 文件 
Chapter 12/omegacity-iOS/omegacityProxyHUD 中 ， 展 示 了 一 个 来 自 OmegaCityGameProxy 类 
的 方法 ， 它 从 覆盖 视图 向 主 视图 发 送 一 个 消息 : 

OmegaCityGameProxy.prototype.play = function() { 
CocoonJS.App.forwardAsync("playGame();"); 
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主 视图 的 代码 接收 playGame() 消息 ， 告 诉 声 音 引 警 播 放 主 游戏 声音 ， 然 后 告诉 真正 的 游戏 
对 象 来 开始 游戏 。 
function playGame() { 
sound.enterState("play'"); 


game.play(); 
} 


在 另 一 个 方向 上 ， 有 游戏 内 部 发 生 的 事件 来 更 新 显示 ， 比 如 当 一 个 火箭 发 射 后 减少 火箭 计 
数 。 还 有 当 外 星 船 接近 的 时 候 ， 设 置 一 个 接近 警告 ， 用 新 的 红色 闪 炼 文字 更 新 顶部 的 消息 
区 域 。 我 们 通过 使 用 HUD 的 一 个 代理 对 象 ， 从 另 一 个 方向 发 送 消息 (从 主 视 图 到 覆盖 视 
图 ) ， 来 实现 这 些 HUD 的 方法 。 


ProxyHUD .prototype.enterState = function(state, data) { 






































CocoonJS.App.forwardAsync("hudEnterState('" + state + "','"+ 
data + "');"); 
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覆盖 层 的 代码 然后 通过 调用 真实 HUD 对 象 的 enterstate() 方法 来 处 理 hudEnterState() 
消息 : 
function hudEnterState(state, data) { 


console.log("HUD state: " + state + " " + data); 
hud.enterState(state, data); 





} 





刚才 展示 的 设计 模式 或 许 看 起 来 奇怪 ， 但 事实 上 它 在 支持 进程 间 通 信 
(InterProcess Communication，IPC) 的 系统 中 相当 常见 。 它 们 使 用 诸如 远程 
过 程 调用 (Remote Procedure Call，RPC) 的 技术 ， 其 中 有 两 个 独立 的 计算 
机 进程 ， 通 过 封装 函数 调用 的 消息 来 相互 通信 。 

CocoonJS 的 双 视 图 架构 ， 使 得 我 们 如 果 想 在 混合 应 用 上 构建 一 个 基于 
HTMLS5 的 覆盖 层 ， 就 必须 使 用 RPC。 编 写 双 向 通信 的 代理 代码 有 点 乏味 ， 
如 果 有 自动 化 工具 会 容易 些 。 在 我 和 Ludei 开发 者 的 讨论 中 ， 他 们 暗示 了 相 
关 工 具 正 在 开发 中 。 




















12.4.3 WebGL 混 合 开发 : 问题 


在 这 一 节 中 ， 我 们 研究 了 使 用 混合 方法 开发 一 个 基于 HTMLS5 的 移动 3D 应 用 : 一 个 原生 
应 用 ,使 用 WebView 来 泻 染 HTML， 加 上 原生 的 库 来 模拟 WebGL API。 对 于 类 似 iOS 
这 样 的 环境 (移动 版 Safari 和 移动 版 Chrome 浏览 器 不 支持 WebGL)， 混合 方 法 是 值得 
考虑 的 。 

我 们 研究 了 用 Ludei 的 CocoonJS 作为 一 种 可 能 的 混合 方案 。CocoonJS 允许 我 们 轻松 组 装 
应 用 ， 不 需要 我 们 学 习 像 iOS 的 Cocoa 那样 的 原生 API。 不 过 我 们 还 需要 做 一 个 额外 的 工 
作 来 开启 HTML5 覆盖 视图 。 因 为 CocoonJS 并 不 是 一 个 完整 的 Web 浏览 器 ， 它 只 是 一 个 
canvas 演 染 器 ， 所 以 我 们 需要 分 离 所 有 HTML5 UI 元素 到 另 一 个 WebView 控件 上 ， 使 用 
特殊 的 JavaScript API 在 那个 视图 及 canvas 间 进 行 通信 。 尽 管 这 个 方案 有 局 限 性 ， 但 它 对 
大 部 分 使 用 场景 已 经 足够 了 。 然 而 CocoonJS 并 不 开源 ， 它 的 开发 公司 还 在 积极 研究 对 开 
发 者 的 授权 方式 。 一 个 开源 的 替代 方案 是 Impact Ejecta， 但 使 用 这 个 库 需 要 大 量 的 iOS 开 
发 知识 。 而 且 它 还 在 开发 中 ， 缺 乏 打 麻 。 

使 用 3D 混合 开发 的 问题 是 没有 一 个 理想 的 方案 。 但 它 有 可 行 的 开发 方案 ， 最 终 要 取决 于 
你 的 需求 和 预算 。 


12.5 ”移动 3D 性 能 


移动 平台 的 资源 比 桌 面 平台 有 限 ， 它 们 通常 内 存 更 小 ，CPU 和 GPU 的 性 能 更 差 。 移 动 平 
台 还 会 有 带宽 方面 的 限制 ， 这 取决 于 设备 的 网 络 类 型 及 流量 套餐 。 无 论 你 开发 的 是 一 个 基 
于 浏览 器 的 Web 应用、 打包 为 Web 应 用 的 纯 HTMLS5 应 用 ， 还 是 使 用 CocoonJS 或 Ejecta 
的 原生 /HTML5 混合 应 用 ， 你 都 需要 在 开发 移动 3D 应 用 时 特别 关注 性 能 问题 。 
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关于 性 能 问题 的 完整 处 理 方法 超出 了 本 书 的 范围 ， 我 们 可 以 快速 浏览 一 些 更 突出 的 问题 ， 

并 介绍 几 种 技术 来 作为 备用 。 以 下 是 需要 注意 的 性 能 问题 ， 排 序 不 分 先后 。 

。 JavaScript 内 存 管 理 
JavaScript 是 自动 垃圾 回收 的 语言 。 这 意味 着 开发 者 不 需要 显 式 分 配 内 存 ， 而 是 由 虚拟 
机 来 完成 。 它 还 会 在 不 需要 使 用 内 存 的 时 候 将 其 释放 供 后 续 使 用 ， 这 个 过 程 被 称 为 垃圾 
回收 (garbage collection)。 垃 圾 回收 被 设计 为 由 虚拟 机 来 决定 在 何 时 执行 。 这 会 导致 应 
用 在 虚拟 机 需要 花 时 间 进 行 垃圾 回收 的 时 候 ， 遭 遇 明 显 的 延迟 。 有 许多 减少 虚拟 机 在 垃 
圾 回收 方面 所 耗 时间 的 技术 ， 列 举 如 下 。 


4 
4 


4 
4 






























































在 应 用 启动 的 时 候 预 先 分 配 好 内 存 。 

创建 可 重用 的 对 象 “ 池 ”， 可 由 开发 者 来 进行 循环 使 用 。 

函数 在 返回 复杂 值 的 时 候 ， 不 是 创建 一 个 新 的 JavaScript 对 象 ， 而 是 放 在 合适 的 对 象 
内 传递 过 来 。 

避免 闭 包 ( 即 对 象 可 以 持 有 函数 作用 域外 的 其 他 对 象 )。 

一 般 来 说 ， 避 免 在 不 必要 的 时 候 使 用 new 操作 符 。 











移动 平台 更 会 受到 垃圾 回收 的 影响 ， 因 为 它们 内 存 更 少 。 


. 性 





能 更 差 的 CPU 和 GPU 





制造 商 让 移动 设备 更 轻 和 更 便宜 的 一 种 方法 是 使 用 性 能 更 差 和 更 便宜 的 组 件 ， 包 括 CPU 


和 GPU。 尽 管 移动 平台 开始 变 得 惊人 地 强大 ， 但 它们 还 比 不 上 桌面 平台 。 为 了 更 好 地 支 

















持 小 的 CPU 和 GPU， 并 提供 更 好 的 用 户 体验 及 节省 电池 寿命 ， 请 考虑 以 下 策略 。 


多 


4 


使 用 低 分 辨 率 的 3D 内 容 。3D 内 容 会 对 移动 设备 的 CPU 和 GPU 造成 负担 。 尤 其 是 
手机 ， 没 必要 发 布 非常 高 的 分 辩 率 ， 因 为 它们 屏幕 的 分 状 率 并 不 高 。 为 什么 要 浪费 
额外 的 分 辩 率 呢 ? 这 一 技术 还 可 以 通过 减 小 下 载 大 小 ， 来 帮助 减轻 低速 网 络 的 负荷 。 
另 一 方面 ， 新 的 平板 提供 了 非常 高 的 分 辩 率 ， 因 此 你 需要 小 心地 做 好 平衡 。 

注意 你 的 算法 。 一 台 非 常 快 的 机 器 可 以 掩盖 糟糕 的 代码 ， 但 是 ， 移 动 设 备 往往 会 将 
它们 暴 圳 无遗。 比如， 试 着 在 Kindle Fire HDX 上 点 击 Futurgo 的 金属 车 身 。 有 了 时候 
你 会 看 到 停 断 ， 这 是 代码 在 查找 哪个 对 象 被 点 击 了。 这 是 Three.js 内 选取 实现 的 副 作 
用 。 它 的 代码 使 用 未 优化 的 算法 ， 在 小 设备 上 便 暴露 出 来 了 。 有 一 天 ， 这 个 代码 会 
在 Three.js 中 被 修复 ,或 在 类 似 Vizi 那样 的 框架 中 以 另 一 种 更 好 的 方式 实现 , 但 现在 ， 
需要 注意 类 似 这 样 的 性 能 问题 , 如 有 必要 的 话 , 你 需要 解决 它们 来 减少 处 理 器 的 负担 。 
简化 着 色 器 。 基 于 GLSL 的 着 色 器 可 以 很 复杂 ， 复 杂 到 编译 的 代码 在 有 些 性 能 有 限 
的 移动 设备 上 难以 支持 。 你 需要 注意 在 部 署 到 这 些 平 台 上 时 简化 着 色 器 。 



































。 有 限 的 网 络 资源 
对 于 使 用 移动 网 络 或 有 流量 套餐 限制 的 设备 ， 最 好 试 着 减少 数据 传输 的 开支 。3D 内 容 
很 丰富 ， 会 需要 下 载 更 多 的 内 容 。 在 设计 你 的 应 用 时 请 考虑 以 下 这 些 方法 。 


多 








预先 打包 资源 。 如 果 你 能 打包 发 布 Web 应 用 ， 那 就 再 理想 不 过 了 。 内 容 只 有 在 应 用 
安装 的 时 候 下 载 。 

使 用 浏览 器 缓存 。 如 果 可 能 的 话 ， 设 计 你 的 资源 来 利用 浏览 器 缓存 ， 避 免 不 必 要 的 
下 载 。 
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4 批量 资源 。 这 个 经 典 的 Web 性 能 优化 技术 ， 可 以 市 省 网 络 请 求 和 服务 器 往返 。 如 果 
发 布 多 个 位 图 ， 比 如 实现 一 个 进度 条 ， 你 要 考虑 合并 这 些 位 图 到 一 个 CSS 图 片 精灵 
(sprite) 中 ( 即 所 有 图 片 存 储 在 一 个 文件 中 ， 再 在 CSS 中 定义 偏 移 )。 

9 使 用 二 进 制 格式 和 数据 压缩 。 第 8 章 讨论 的 gITF 文件 格式 的 一 个 主要 的 目的 是 减少 
文件 大 小 ， 从 而 减少 下 载 时 间 。 它 是 通过 使 用 二 进 制 格式 实现 的 。 这 个 技术 可 以 与 
服务 器 端 压缩 ， 黄 至 特定 领域 压缩 算法 相 结 合 ， 比 如 3D 几何 体 压缩 ， 来 进一步 减少 
下 载 次 数 和 减轻 数据 网 络 的 负担 。 


12.6 ”小结 


本 章 探索 了 使 用 HTML5 和 WebGL 开发 移动 3D 应 用 的 全 新 世界 。 移 动 平台 在 性 能 上 开始 
逐渐 比肩 桌面 平台 ， 同 时 ，HTML5 受到 移动 设备 影响 引入 了 新 的 强大 功能 。 大 部 分 移动 
平台 支持 3D: CSS3 无 处 不 在 ，WebGL 在 除 i0S 上 移动 版 Safari 和 移动 版 Chrome 之 外 的 
平台 上 都 被 支持 。 


移动 浏览 器 WebGL 的 开发 流程 非常 简单 。 现 有 的 应 用 通常 不 需要 修改 就 能 工作 。 但 是 基 
于 鼠标 的 输入 必须 替换 为 触摸 输入 。 我 们 研究 了 如 何 添加 触摸 事件 到 Vizi 查看 器 中 实现 旋 
转 和 缩放 功能 。 我 们 还 为 Futurgo 模型 添加 了 轻 拍 支持 ， 使 得 点 击 车 的 不 同 部 分 会 展现 弹 
出 层 。 为 了 在 桌面 上 开发 和 测试 触摸 功能 ， 我 们 设置 桌面 Chrome 来 模拟 触摸 事件 。 我 们 
还 可 以 通过 不 同 平台 厂商 提供 的 打包 和 分 发 技术 (比如 Amazon 的 移动 应 用 分 发 中 心 )， 使 
用 WebGL 代码 来 创建 打包 的 3D 应 用 ( 即 平台 的 “Web 应 用 ”)。 


对 于 不 支持 WebGL 的 平台 ， 我 们 使 用 类 似 CocoonJS 和 Ejecta 的 适 配 技术 来 创建 混合 应 
用 ,结合 HTML5 与 原生 代码 。 这 人 允许 我 们 用 JavaScript 构建 ， 并 发 布 高 性 能 、 兼 容 各 个 
平台 的 原生 应 用 ， 并 可 能 可 访问 只 在 原生 平台 上 的 功能 ， 比 如 应 用 内 购买 和 消息 推送 。 
最 后 ， 我 们 快速 浏览 了 移动 性 能 问题 。 尽 管 移动 平台 在 这 几 年 进步 地 非常 快速 ， 但 它们 依 
然 比 桌 面 系 统 性 能 差 。 我 们 需要 留意 性 能 问题 ， 具 体 来 说 是 内 存 管理 、CPU 和 GPU 的 使 
用 ， 以 及 带宽 ， 并 对 此 进行 相应 的 设计 。 
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本 附录 按 类 别 列 出 了 3D Web 开发 的 资源 。 我 经 常 访问 以 下 大 部 分 站 点 来 查找 最 新 的 技术 
资讯 、 库 、 工 具 、 前 沿 演示 ， 以 及 3D 开发 社区 领袖 们 的 想法 。 


A.1 WebGL 资 源 








A.1.1 WebGL 规 范 


WebGL 标准 由 Khronos 组 织 开 发 和 维护 ， 该 组 织 还 千 管 着 OpenGL、COLLADA， 以 及 其 
他 你 或 许 听 过 的 规范 。 你 可 以 在 Khronos 网 站 (http://www.khronos.org/registry/webgl/specs/ 
latest/1.0/) 找到 最 新 版 本 的 官方 WebGL 规范 。 


A.1.2 WebGL 邮 件 列表 和 论坛 

Khronos 维护 了 一 个 公开 的 邮件 列表 ， 来 讨论 WebGL 规范 的 草图 。 你 可 以 按照 https:Wwww. 
khronos.org/webgl/public-mailing-list/ 的 指示 来 订阅 public_webgl@khronos.org 邮件 列表 。 
还 有 一 个 Google group 来 讨论 核心 规范 外 更 通用 的 WebGL 开发 话题 。 你 可 以 在 http://goo. 
gl/CJIvC4 注册 这 个 列表 。 




















A.1.3 WebGL 博 客 和 演示 站 点 
有 许多 出 色 的 博客 致力 于 探讨 WebGL 开发 。 以 下 是 一 些 我 经 常 访问 的 博客 。 
。 Learning WebGL (http://learningwebgl.com/blog/) 
WebGL 网 站 的 祖师 笃 ， 由 Giles Thomas 创建 ， 现 在 是 我 在 维护 。 这 应 该 成 为 你 学 习 底 
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层 WebGL 开发 的 基础 知识 及 API 用 法 的 第 一 站 。 它 还 有 最 新 WebGL 演示 及 开发 项 目 
的 每 周 摘要 。 


。 Learning Three.js (http://learningthreejs.com/) 
Jerome Etienne 的 博客 ， 专 注 于 Three.js 技术 及 开发 实践 。 
。 TojiCode (http://blog.tojicode.com/) 


Google 工程 师 Brandon Jones 的 博客 ， 特 点 在 于 有 大 量 关 于 WebGL API 的 深入 的 技术 
信息 ， 以 及 专业 的 开发 话题 


。 Three.js on Reddit (http://www.reddit.com/r/threejs) 
Three.js 的 Reddit， 由 Theo Armour 维护 ， 更 新 频繁 。 这 个 Reddit 有 许多 演示 、 技 术 、 
新 闻 及 文章 。 


。 WebGL.com (http://www.webgl.com/) 
由 来 自 纽 约 的 Darien Acosta 创建 ， 它 是 一 个 发 现 新 WebGL 游戏 、 演 示 及 应 用 的 网 站 。 
。 WebGL Mozilla Labs Demos (https://developer.mozilla.org/en-US/demos/tag/tech:webgl/) 
Mozilla Labs 及 其 合作 伙伴 创建 的 演示 。 


。 WebGL Chrome Experiments (http:/www.chromeexperiments.com/webgl) 


Google 及 其 合作 伙伴 创建 的 演示 。 


A.1.4 WebGL 社 区 站 点 


我 主持 了 湾 区 的 WebGL 聚会 (http:/www.meetup.com/WebGL-Developers-Meetup/) 。 在 
洛杉矶 、 纽 约 、 波 士 顿 、 伦 敦 及 其 他 地 方 都 有 WebGL 聚会 。 聚 会 是 将 志同道合 的 人 联系 
在 一 起 的 好 方式 。 如 果 你 不 住 在 旧金山 ， 可 以 在 http://Meetups.com 查找 你 区 域 的 WebGL 
组 ， 或 者 自己 组 织 。 


此 外 还 有 一 个 LinkedIn 群 组 (http://www.linkedin.com/groups?gid=2426944) 和 一 个 Face- 
book 主页 (http://www.facebook.com/groups/webgl/)。 


A.2 CSS3 资 源 


A.2.1 CSS3 规 范 
万 维 网 联盟 (W3C) 维护 CSS3 规范 的 核心 ， 包 括 3D 变换 、 过 渡 、 动 画 和 滤 镑 效果 : 


http://www.w3.org/TR/css3-transforms/ 












































http://www.w3.org/TR/css3-transitions/ 
http://www.w3.org/TR/css3-animations/ 
http://www.w3.org/TR/filter-effects/ 


第 6 音 介 绍 的 CSS 自 定义 滤 镜 的 主要 支持 者 是 Adobe。 它 在 浏览 器 里 并 没有 得 到 广泛 支 
持 一 一 目前 仅 有 Chrome 支持 一 一 所 以 你 使 用 它 开发 的 时 候 要 注意 了 。 最 新 的 信息 可 以 在 
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http://adobe.github.io/web-platform/samples/css-customfilters/ 找到 。 


A.2.2 CSS3 博 客 和 演示 站 点 
目前 在 Twitter 工作 的 David DeSandro， 创 建 了 理解 如 何 使 用 CSS 3D 变换 的 最 好 资源 
(http://24ways.org/2010/intro-to-css-3d-transforms/) 。 


Codrops (http://tympanus.net/codrops/) 是 一 个 Web 设计 和 开发 博客 ， 有 几 个 极 好 的 CSS 3D 
效果 演示 ， 包 括 第 6 章 的 重头 戏 3D 书展 示 (http://tympanus.net/codrops/2013/01/08/3d- 
book-showcase/) 。 














Dirk Weber 的 HTMLS5 开发 网 站 (http://www.eleqtriq.com) 有 几 个 引人入胜 的 CSS 3D 演示 。 
Keith Clark 挑战 了 CSS 的 极限 ， 完 全 用 CSS 3D 创建 了 一 个 令 人 兴奋 的 第 一 人 称 射击 演示 
(http://blog.keithclark.co.uk/creating-3d-worlds-with-html-and-css/) 。 


微软 的 Kirupa Chinnathambi 提供 了 CSS 过 渡 及 动画 的 深入 信息 ， 具 体 请 查看 文章 https:// 
www.kirupa.com/html5/all_about_css_transitions.htm 和 https://www.kirupa.com/html5/all_ 








about _css_animations.htm 。 


Bradshaw Enterprises (http://css3.bradshawenterprises.com/) 上 有 一 些 学 习 CSS3 过 渡 、 变 
换 、 动 画 及 滤 镜 效果 的 有 价值 的 文章 、 教 学 和 资源 。 


A.3 ” Canvas 资源 


A.3.1 Canvas 2D Context 规 范 


2D Canvas API 规 范 由 W3C 维护 ， 你 可 以 在 http:/www.w3.org/TR/2dcontext2/ 找到 最 新 的 
规范 。 


A.3.2 ” Canvas 2D 教 程 


第 7 章 讨 论 过 ， 开 发 者 可 以 使 用 Three.js 或 K3D/Phoria ( 稍 后 介绍 ) 来 创建 由 2D Canvas 
API 泻 染 的 3D 应 用 。 这 些 库 隐藏 了 2D Canvas 泻 染 的 细节 ， 提 供 了 高 层次 的 3D 组件。 但 
是 ， 如 果 你 想 学 习 2D Canvas API 的 细节 ， 网 上 有 大 量 资源 。 以 下 是 我 在 写作 本 书 时 发 现 
的 几 个 非常 有 用 的 链接 : 
https:/developer.mozilla.org/en-US/docs/Web/APLICanvas_APITutorial 
http://www.w3schools.com/html/htmlS_canvas.asp 


























http://diveintohtml$.info/canvas.html 
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A.4 ”框架 、 库 和 工具 


A.4.1 3D 开 发 库 
这 几 年 出 现 了 若干 开源 3D JavaScript 库 ， 我 将 其 中 一 些 优秀 的 库 列 举 如 下 ， 排 名 不 分 先后 。 











Three.js (http://threejs.org/) 

目前 为 止 开发 WebGL 应 用 最 流行 的 场景 图 库 。Three.js 已 经 被 用 来 开发 许多 知名 的 旗 
舰 WebGL 演示 。 它 提供 了 在 3D 图 形 中 常见 的 一 系列 简单 直观 的 对 象 。 它 性 能 卓越 ， 
使 用 了 图 形 引 擎 中 的 许多 最 佳 实践 技术 。 它 功能 强大 ， 有 内 建 对 象 类 型 和 便利 的 工具 。 
Three.js 还 有 插件 泻 染 系统 ， 人 允许 将 3D 内 容 泻 染 到 (有 些 限制 ) 2D Canvas API、SVG 
及 使 用 3D 变换 的 CSS3。Three.js 维护 良好 ， 有 好 几 个 作者 在 进行 贡献 。 


SceneJS (http://www.scenejs.org/) 

一 个 开源 的 JavaScript 3D 引擎 ， 提 供 了 WebGL 上 基于 JSON 的 场景 图 API。SceneJS 
专门 用 来 高 效 谊 染 大量 独立 可 选取 且 有 关联 的 对 象 ， 这 在 工程 和 医学 中 的 高 细节 模型 查 
看 应 用 中 是 必需 的 。SceneJS 还 支持 物理 ， 并 提供 了 某 些 比 Three.js 更 高 层次 的 构建 方 
法 ， 比 如 事件 模型 和 jQuery 式 的 场景 图 API。 

GLGE (http:Wwww.glge.org/) 

GLGE 是 一 个 JavaScript 库 ， 意 图 方便 WebGL 的 使 用 和 缩短 设置 时 间 ， 使 得 开发 者 可 
以 将 精力 用 在 创建 Web 富 内 容 上 。GLGE 对 于 基本 操作 有 良好 的 支持 ， 但 不 像 Three.js 
或 SceneJS 那样 功能 强大 。 


K3D 和 Phoria (http:/www.kevs3d.co.uk/dev/phoria/) 

K3D 以 及 它 的 后 续 Phoria， 只 使 用 2D Canvas API 演 染 3D 图 形 。Phoria 由 英国 的 
Kevin Roast (http:Wwww.kevs3d.co.uk/dev/;， Twitter 账号 是 @kevinroast) 所 创建 。Kevin 
是 一 个 UI 开发 者 及 图 形 爱 好 者 。 尽 管 Phoria 还 处 在 开发 早期 ， 并 不 像 Three.js 那样 功 
能 强大 ,但 它 令 人 印象 非常 深刻 。 尤 其 值得 一 提 的 是 ， 它 很 快 ， 并 且 对 着 色 器 及 纹理 支 
持 恨 好 。 但 是 ，Phoria 基于 软件 泻 染 而 设计 ， 因 此 它 的 3D 能 力 受 限 。 某 些 3D 功能 》 
靠 软件 是 几乎 不 可 能 实现 (或 者 实现 好 ) 的 。 














































































































A.4.2 3D 游 戏 引 擎 


现在 在 市 场 上 出 现 了 许多 WebGL 游戏 引擎 。 它 们 是 构建 游戏 和 复杂 3D 应 用 的 好 选择 ， 














但 对 于 简单 3D 开发 项 目 来 说 就 有 点 杀 鸡 用 牛刀 了 (关于 这 一 点 ,请 看 A.4.3 节 )。 除 非 另 
有 说 明 ， 否 则 这 里 列 出 的 游戏 引擎 都 是 开源 的 。 


playcanvas (http://www.playcanvas.com/) 

位 于 伦敦 的 playcanvas 开发 了 一 个 强大 的 引 敬 及 基于 云 的 编辑 工具 。 编 辑 工 具 的 功能 
支持 团队 开发 的 实时 协同 场景 编辑 ，GitHub 和 Bitbucket 集成 ， 一 键 发 布 到 社交 媒体 网 
络 上 。 在 我 编写 本 书 的 时 候 ，playcanvas 发 布 了 客户 端 引 擎 的 源码 ， 但 它 没有 发 布 许可 


la 
条 款 。 
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。 Turbulenz (http://biz.turbulenz.com/) 
Turbulenz 是 一 个 非常 强大 的 、 开 源 、 无 授权 费 的 游戏 引擎 ， 并 打包 成 了 一 个 可 下 载 
的 SDK。 该 公司 对 想 要 在 它 的 网 络 (https://ga.me/) 上 发 布 作 品 的 开发 者 收取 费用 。 
Turbulenz 拥有 最 复杂 的 API， 有 大 量 类 ， 学 习 曲 线 陡峭 。 显 然 它 是 提供 给 有 经 验 的 游 
戏 开发 者 的 。Turbulenz 提供 了 开源 的 客户 端 库 ,保留 了 系统 的 其 他 部 分 (服务 器 、 虚 
拟 货 币 等 ) 来 创造 收入 。 

。 Goo Engine (http://www.gootechnologies.com/) 
Goo 最 近 发 布 了 需要 邀请 的 beta 版 本 引擎 和 内 容 创建 工具 。 作 为 Goo Engine 的 配套 ， 
这 家 公司 提供 了 容易 使 用 的 内 容 创建 前 端 ， 目 标 用 户 是 主流 Web 开发 者 。 在 本 书 编写 
期 间 ，Goo 还 没 开 源 。 

。 Verold (http://www.verold.conm/) 
一 个 轻 量 级 的 3D 交互 内 容 发 布 平台 ， 由 位 于 多 伦 多 的 Verold 公司 开发 。 公 司 将 其 描述 
为 “一 个 没有 插件 的 、 可 扩展 的 系统 ， 使 用 简单 的 JavaScript 来 让 业余 爱好 者 、 学 生 、 
教师 、 可 视 化 通信 专家 以 及 Web 市 场 人 员 来 简单 集成 3D 动画 内 容 到 他 们 的 Web 页 面 
中 >。 和 Goo 一 样 ，Verold 面向 一 般 Web 图 形 开 发 ， 引 擎 复杂 但 前 端 简单 。 本 书 编写 
期 间 ，Verold 还 没有 开源 。 

。 Babylon.js (http://www.babylonjs.com/) 
Babylon.js 是 微软 员工 David Catuhe 开发 的 一 个 个 人 项 目 。 它 是 一 个 易于 使 用 的 引擎， 
在 功能 及 易 用 性 上 介 于 Threejjs 和 硬 核 游戏 引擎 之 间 。 它 的 演示 网 站 上 展示 的 应 用 跨度 
范围 大 ， 从 太空 射击 到 建筑 浏览 。 

。 KickJS (http:/www.kickjs.org/) 
Morten Nobel-Jgrgensen 创建 的 一 个 开源 游戏 引擎 和 泻 染 库 ， 这 个 项 目 是 从 他 的 学 术 工 
作 中 发 展 而 来 的 。 在 开发 和 支持 上 ，KickJS 似乎 比 不 上 这 里 列 出 的 其 他 游戏 引擎 。 但 
将 它 包 括 在 学 习 列 表 中 主要 是 因为 ， 在 介绍 的 所 有 游戏 引擎 中 ，KickJS 最 严格 地 遵循 
现代 游戏 ?引擎 设计 的 最 佳 实践 。 











































































































A.4.3 3D 展 示 框 架 


加 快 开 发 3D 的 需求 导致 了 几 个 实验 展示 框架 的 出 现 。 和 游戏 引 敬 不同， 这些 框 架 的 重点 

是 快速 简单 地 在 页 面 中 竹 入 图 形 ， 用 于 数据 可 视 化 、 产 品 展现 、 简 单 的 动画 等 。 

。 Voodoo.js (http:/www.voodoojs.com/) 
Voodoo.js 的 目标 是 让 创建 3D 内 容 变 得 简单 ， 并 容易 幅 入 到 页 面 中 。Voodoo.js 有 一 个 
极其 简单 的 API， 用 来 添加 3D 模型 到 页 面 中 : 只 需 提供 模型 的 URL、 一 个 DIV 元 素 
的 id 和 一 些 配置 参数 ， 你 就 能 在 页 面 中 拥有 3D 了 。Voodoo.js 的 功能 主要 是 页 面 中 的 
简单 模型 查看 ， 但 仅 就 这 一 个 用 途 来 说 ， 它 就 相当 不 错 了 。 

。 tQuery (http://jeromeetienne.github.io/tquery/) 


tQuery 由 Jerome Etienne 创建 ， 他 同时 运营 着 流行 的 的 博客 Learning Three.js (http:// 
learningthreejs.com/) 。tQuery 模仿 jQuery 库 ， 目 的 是 提供 “Three.js 的 功能 + jQuery API 
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的 可 用 性 ”， 也 就 是 说 ， 用 一 个 非常 简单 的 API 来 操作 Three.js 场景 图 。 它 使 用 了 一 个 链 
式 函 数 编程 模式 ， 支 持 通 过 回调 进行 高 级 别 的 交互 。 使 用 tQuery 可 以 节省 很 多 行 Three. 
js 代码 的 编写 。 或 许 把 tQuery 称 为 框架 并 不 正确 ， 因 为 它 更 像 是 一 个 本 着 jQuery 精神 的 
无 侵入 库 。tQuery 可 以 为 想 节 省 键盘 操作 的 Threejs 开发 者 节省 大 量 时 间 。 

PhiloGL (http:/www.senchalabs.org/philogl/) 

PhiloGL 是 一 个 实验 性 的 框架 ， 由 数据 可 视 化 专家 Nicolas Garcia Belmonte 在 Sencha 公 
司 的 实验 室 工作 时 创建 。PhiloGL 的 目标 是 “让 WebGL 编程 像 使 用 任何 主流 框架 开 
发 那样 有 趣 和 简单 ”。Garcia 在 他 的 博客 文章 (http://www.sencha.com/blog/introducing- 
philogl-a-webgl-javascript-library-from-sencha-labs/) 中 描述 了 他 的 设计 理念 。 尽 管 这 个 
框架 是 实验 性 的 ， 但 它 值 得 一 看 。Sencha 公司 开发 了 世界 一 流 的 用 户 界 面 框架 ， 知 道 
如 何 用 HTMLS5 创建 有 效 的 用 户 界面 。PhiloGL 网 站 包含 了 一 些 可 工作 的 例子 ,移植 了 
Learning WebGL (http:/www.learningwebgl.com/) 的 全 部 教程 。 







































































Vizi (https://github.com/tparisi/Vizi) 

我 自己 设计 的 一 个 展示 框架 ， 它 凝结 了 我 开发 早期 3D 框架 和 引擎 (比如 VRML 和 
X3D) 的 多 年 经 验 。Vizi 采用 了 当前 游戏 引擎 的 最 佳 实践 ， 最 值得 一 提 的 是 它 使 用 组 件 
化 和 聚合 来 构建 高 层次 的 功能 ， 而 不 是 基于 类 的 继承 。Vizi 的 目标 是 使 开发 者 易于 快速 
构建 有 趣 的 3D 应 用 。 和 Voodoo.js 一 样 ，Vizi 允许 开发 者 用 几 行 代码 将 一 个 模型 放 到 
页 面 中 ， 但 是 它 还 提供 了 完整 的 高 层次 API 来 添加 交互 、 动 画 、 行 为 到 场景 中 的 任意 
元 霖 |; 












































A.4.4 ” ”3D 编辑 工具 


1. 传统 建 模 和 动画 软件 

Autodesk (http://www.autodesk.com/) 提供 了 一 系列 3D 建 模 和 动画 软件 ， 它 们 的 价格 都 比 
较 高 。 目 前 Autodesk 开始 提供 软件 的 学 习 和 试用 版 ， 它 们 值得 一 试 。 

除了 Autodesk 的 专业 套件 ， 还 有 几 个 免费 或 不 太 贵 的 软件 可 用 来 创建 3D 内 容 ， 介 绍 
如 下 。 












































Blender (http://www.blender.org/) 

一 个 免费 、 开 源 、 跨 平台 的 3D 创建 工具 套件 ，Blender 可 以 运行 在 所 有 主流 操作 系统 
上 ， 以 GNU GPL 的 方式 授权 。Blender 由 荷兰 软件 开发 者 Ton Roosendaal 创建 ， 由 
Blender 基金 会 (荷兰 的 一 个 非 营 利 性 组 织 ) 负责 维护 。Blender 非常 流行 ， 估 计 有 两 
百 万 用 户 ， 从 业余 /学 生 级 别 用 户 到 专业 设计 师 和 工程 师 。 

SketchUp (http://www.sketchup.com/) 

SketchUp 是 一 个 易于 使 用 的 3D 建 模 程序 ， 用 在 建筑 、 工 程 和 一 些 游戏 开发 中 。 你 可 以 
在 它 的 网 站 找到 免费 和 不 算 贵 的 专业 版 本 。 

Poser (http://poser.smithmicro.com/) 

一 个 用 于 角色 动画 的 中 级 3D 工具 。Poser 和 SketchUp 一 样 ， 价 格 吸引 人 ， 并 针对 日 党 
的 内 容 创 建 用 户 。 它 有 一 个 直观 的 用 户 界 面 来 摆 放 造 型 和 动画 角色 。Poser 还 有 一 个 庞 
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大 的 库 ， 包 含 已 经 建 好 模型 、 骨 架 且 带 完整 贴图 的 人 物 和 动物 角色 ， 以 及 一 系列 背景 场 
景 、 道 具 、 载 体 、 相 机 和 光照 设置 。Poser 可 以 用 来 创建 照片 级 的 静态 泻 染 和 实时 动画 。 
2. 基于 浏览 器 的 集成 环境 
有 了 云 计 算 和 在 WebGL 泻 染 的 能 力 ， 我 们 看 到 了 一 种 新 型 创建 工具 : 在 浏览 嚣 中 的 3D 
集成 环境 。 以 下 工具 还 在 早期 开发 中 ， 但 很 有 前 途 。 
。 Goo Create (http://www.gootechnologies.com/) 
前 面 讨论 的 Goo Engine 搭配 了 一 个 易于 使 用 的 内 容 创建 前 端 一 一 Goo Create。Goo 
Create 的 目标 用 户 是 主流 Web 开发 者 。 它 还 有 儿 个 预先 创建 好 的 模型 和 动画 ， 可 以 依 
此 进行 开发 学 习 。 
。 Verold Studio (http://www.verold.com/) 
Verold Studio 是 一 个 在 浏览 器 中 运行 的 3D 内 容 创 建 工 具 和 开发 环境 ， 它 包含 了 之 前 介 
绍 过 的 Verold 游戏 引擎 。 
。 Sketchfab (http://sketchfab.com/) 
Sketchfab 是 一 个 实时 在 线 发 布 和 分 享 交互 式 3D 内 容 的 Web 服务 ， 它 不 需要 插件 。 只 
需要 点 击 几 下 ， 艺 术 家 就 能 上 传 一 个 3D 模型 (可 以 是 儿 种 格式 ) 到 Sketchfab 网 站 上 ， 
来 获得 HTML 代码 以 分 享 一 个 部 署 在 Sketchfab 网 站 上 的 内 髓 模型 视图 。 
。 SculptGL (https://github.com/stephomi/sculptgl) 
一 个 免费 和 开源 的 Web 实体 建 模 工 具 ， 有 非常 易 用 的 界面 来 创建 简单 的 雕塑 模型 。 
SculptGL 可 以 导出 到 多 种 格式 ， 并 直接 发 布 到 Verold 及 Sketchfab 上 。 


A.4.5 动画 框架 

现今 的 应 用 应 该 使 用 requestAnimationFrame() 来 让 内 容 动 起 来 。 为 了 保证 这 个 功 
能 得 到 跨 浏 览 器 支持 ， 可 以 使 用 Paul Irish 的 强大 polyfill (http://paulirish.com/2011/ 
requestanimationframe-for-smart-animating/) 。 




































































对 于 简单 的 补 间 动 画 ，Tween.js (https://github.com/tweenjs/tween.js) 是 Soledad Penades 创 
建 的 流行 开源 补 间 工具 。 

对 于 关键 帧 动画 ， 在 Three.js 中 有 些 内 建 的 类 ， 而 在 随 项 目 发 布 的 例子 中 还 有 更 多 。 随 
着 更 多 在 线 工具 的 出 现 ， 以 及 类 似 gITF 那样 对 Web 友好 格式 的 成 熟 ， 这 个 领域 还 在 不 
断 进化 。 


A.4.6 ”调试 和 分 析 WebGL 应 用 

新 版 的 浏览 器 自 带 了 各 种 WebGL 调试 和 分 析 工 具 。AGI (Cesium 的 开发 商 ，Cesium 是 
一 个 基于 WebGL 的 虚拟 地 球 和 地 图 引擎 ) 的 图 形 架 构 师 Patrick Cozzi， 写 了 一 篇 浏览 器 
内 置 WebGL 工具 的 优秀 综述 (http:/www.realtimerendering.com/blog/webgl-debugging-and- 
profiling-tools/) 。 
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A.4.7 移动 3D 开 发 资源 


添加 触摸 支持 是 创建 引人入胜 的 移动 3D 应 用 的 关键 。 浏 览 器 触摸 事件 规范 可 以 在 W3C 推 
荐 页 面 找到 (http://www.w3.org/TR/2013/REC-touch-events-20131010/)。 











Android 的 开发 者 页 面 (http://developer.android.com/guide/webapps/index.html) 包含 了 关于 
开发 基于 HTML5 的 Web 应 用 的 完整 信息 。 


Amazon 有 一 个 用 来 发 布 Web 应 用 的 广泛 的 系统 ， 包 括 一 个 Web App Tester 应 用 ， 它 用 
于 基于 Android 的 Kindle Fire OS (https://developer.amazon.com/sdk/webapps/tester.htm!l), 
还 有 一 个 为 了 打包 和 发 布 最 终 应 用 的 应 用 分 发 入 口 (https://developer.amazon.com/sdk/ 


webapps/manifest.html ) 。 


对 于 不 原生 支持 WebGL 的 环境 ， 比 如 iOS， 还 有 混合 技术 可 以 结合 HTML5/JavaScript 
和 原生 代码 来 构建 应 用 。 尽 管 Adobe 的 PhoneGap (http://phonegap.com/) 是 主流 的 移动 
混合 库 ， 但 它 现在 还 不 支持 WebGL。 为 了 让 iOS 支持 WebGL， 可 以 使 用 下 面 混合 框架 
中 的 一 个 。 


。 CocoonJS (http://www.ludei.com/tech/cocoonjs) 
CocoonJS 可 以 运行 在 Android 和 iOS 上 ， 它 提供 了 一 个 简单 易 用 的 应 用 容器 来 运 
行 HIML5 和 JavaScript 代码 ， 隐 藏 了 底层 系统 的 细节 。CocoonJS 提供 了 对 Canvas、 
WebGL、Web Audio、Web Sockets 等 的 实现 。 它 还 有 一 个 云端 的 项 目 编译 系统 ， 所 以 
你 要 做 的 仅仅 是 登录 和 编译 你 的 项 目 。 开 发 者 不 需要 了 解 如 何 使 用 复杂 的 原生 平台 工 
具 ， 比 如 iOS 的 Xcode， 来 创建 原生 应 用 。CocoonJS 是 财源 项 目 ， 由 它 位 于 旧金山 的 
开发 商 Ludei 严格 控制 。 
。 Ejecta (http://impactjs.com/ejecta) 
Ejecta 是 一 个 开源 库 ， 提 供 了 许多 和 CocoonJS 一 样 的 功能 ， 但 只 支持 iOS。Ejecta 诞生 
自 ImpactJS， 一 个 HTML5 游戏 引 敬 项 目 。Ejecta 更 加 DIY， 需 要 开发 者 对 Xcode 和 原 
生平 台 API 有 相当 的 了 解 。Ejecta 是 开源 的 。 


A.5 ” 3D 文件 格式 规范 


3D 文件 格式 分 为 三 种 类 型 : 模型 格式 ， 用 于 表示 单个 对 象 ， 动画 格式 ， 用 于 动画 关键 帧 
和 和 角色， 全 功能 格式 ， 支 持 整 个 场景 ， 包 括 多 个 模型 、 变 换 层级 结构 、 相 机 、 光 源 、 动 
画 。3D 文件 格式 有 很 多 种 ， 这 里 不 能 一 一 列举 。 


以 下 3D 格式 最 适合 Web 应 用 开发 。 


A.5.1 模型 格式 


。 Wavefront OBJ (http:/Wen.wikipedia.org/wiki/Wavefront .obj _file) 。 
。 STIL 一 一 基于 文本 的 3D 打印 文件 格式 (http://en.wikipedia.org/wiki/STL_%28file_format 
%29)。 
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A.5.2 动画 格式 


id Software 的 MD2 (http://tfc.duke.free.fr/coding/md2-specs-en.html) 和 MD5 (http:/tfc.duke. 
free.fr/coding/md5-specs-en.html) 都 是 角色 动画 格式 。 

。 BioVision 公司 的 BVH 动画 格式 ， 用 于 动作 捕捉 (http:/research.cs.wisc.edu/graphics/ 
Courses/cs-838-1999/JefVBVH.html) 。 


A.5.3 ”完整 场景 格式 


。 VRML (http:/www.web3d.org/standardsvrml/) 和 X3D (http:/www.web3d.org/standards- 
x3d/) Web 最 初 的 3D 格式 。 

。 COLLADA (http:/www.khronos.org/files/collada_spec_1_4.pdf) 一 一 数字 资源 交换 格式 。 
。 glTF (http:/gltt.gy) 一 一 图 形 库 传输 格式 。 


A.6 相关 技术 


3D 开发 并 不 脱离 现实 。 你 也 许 想 要 把 其 他 有 趣 的 Web 技术 整合 到 你 的 3D 项 目 中 。 这 里 
列 出 了 其 中 一 些 。 


A.6.1 指针 锁定 API 

对 于 全 屏 的 3D 应 用 ， 比 如 游戏 ， 你 也 许 希 望 对 鼠标 输入 提供 比 传统 DOM 窗 体 事件 提供 
的 更 精细 的 控制 。 为 此 ， 浏 览 器 最 近 引 入 了 指针 锁定 API， 它 让 开发 者 可 以 隐藏 鼠标 光标 
并 获取 游戏 开发 所 需 类 型 的 底层 鼠标 活动 事件 。 

Google 的 John McCutchan 为 指针 锁定 API 编写 了 一 套 很 好 的 说 明 (http:/www.html5rocks. 
com/en/tutorials/pointerlock/intro/ 5 

你 可 以 在 W3C 的 官网 上 找到 指针 锁定 API 的 最 新 W3C 规范 (http:/www.w3.org/TR/ 
pointerlock/) 。 


A.6.2 页面 可 见 性 API 

每 秒 60 帧 的 3D 应 用 会 耗费 机 器 性 能 。 如 果 一 个 应 用 的 标签 页 或 窗 体 当前 不 可 见 ， 那 么 其 
场景 就 无 需 被 演 染 。 但 应 用 可 能 仍 需要 在 后 台 计 算 结 果 ， 尽 管 不 需要 那么 频繁 。 最 近 的 浏 
览 器 支持 一 个 新 的 特性 ， 页 面 可 见 性 API (Page Visibility API) ， 它 让 开发 者 知道 页 面 或 标 
签 页 何 时 是 不 可 见 的 ， 以 便 调 整 执行 来 节省 机 器 资源 。 


在 谷歌 开发 者 社区 上 有 一 篇 关于 页 面 可 见 性 API 的 优秀 概述 (https://developers.google. 
com/chrome/whitepapers/pagevisibility ) 。 


你 可 以 在 W3C 的 官网 上 找到 页 面 可 见 性 API 的 最 新 W3C 规范 (http://www.w3.org/TR/ 
pointerlock/) 。 
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A.6.3 WebSockets 和 WebRTC 


如 果 你 在 开发 一 个 多 人 互动 3D 游戏 、 虚 拟 世界 或 者 是 实时 协同 的 应 用 ， 你 可 能 需要 实 
现 客户 端 和 服务 端 之 间 的 通信 。WebSockets 和 WebRTC 是 用 于 实现 这 类 功能 的 两 项 主 
要 技术 。 

WebSockets (更 正式 地 说 ， 是 WebSocket 规范 ) 是 浏览 器 对 TCP/IP 协议 的 标准 实现 。 它 
可 以 用 于 客户 端 和 服务 端 之 间 的 双 工 通信 。TCP/IP 本 身 不 是 为 实时 通信 设计 的 ， 因 此 
WebRTC ( 稍 后 介绍 ) 可 能 会 更 合适 ， 这 取决 于 应 用 的 需求 。 这 里 有 一 篇 关于 WebSockets 
的 教程 (http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/)， 
你 还 可 以 访问 WebSockets 项 目的 主页 (http://www.websocket.org/)。 


WebRTC 是 在 Web 客户 端 和 服务 器 间 发 送 实 时 消息 的 标准 。 它 比 WebSocket 协议 更 适合 
多 个 用 户 间 发 送 销 息 ， 因 为 它 就 是 设计 用 来 进行 实时 通信 的 。 教 程 可 以 参考 http://www. 
htmlS$rocks.comy/en/tutorials/webrtc/basics/。 项目 主页 由 Google 维护 ， 地 址 是 http://www. 
webrtc.org/; 当前 W3C 推荐 在 http://www.w3.org/TR/webrtc/。 



































A.6.4 Web Workers 


Web Workers (http:/www.w3.org/TR/webrtc/) 支持 在 JavaScript 中 多 线程 开发 。3D 应 用 可 
以 通过 在 背景 线程 做 某 些 操 作 而 受益 ， 比 如 加 载 模型 或 运行 物理 模拟 。 将 这 些 操作 放 到 后 
台 ， 应 用 可 以 保证 用 户 界面 始终 可 响应 ， 即 便 应 用 正在 处 理 计 算 密 集 型 操作 。 

使 用 Web Workders 有 些 需要 注意 的 事情 ， 比 如 在 线程 间 传 递 内 存 对 象 。 在 HIML5 Rocks 
上 有 一 篇 关于 这 个 细节 的 优秀 文章 (http://updates.html5rocks.com/2011/12/Transferable- 
Objects-Lightning-Fast) 。 











A.6.5 _ IndexedDB 和 FileSystem API 


3D 文件 可 以 变 得 很 大 。 对 于 你 的 项 目 而 言 ， 你 可 能 要 考虑 使 用 新 的 HIML5 技术 存储 数据 
到 用 户 硬盘 ， 来 帮助 节省 下 载 开销 。 浏 览 器 缓存 不 可 靠 ， 因 为 它们 没 那么 大 ， 而 且 不 受 应 
用 控制 一 一 用 户 可 以 随时 清 掉 缓存 ， 或 其 他 Web 数据 会 将 你 应 用 的 内 容 清 出 缓存 。 

Adobe 的 开发 者 布道 师 及 本 书 的 技术 审阅 人 Ray Camden， 提 到 了 可 以 使 用 浏览 器 数据 库 
API IndexedDB 来 存储 本 地 数据 的 想法 。 他 写 了 一 篇 关于 这 个 话题 的 开发 富 SVG 应 用 的 文 
章 (http://www.raymondcamden.com/index.cftm/2013/2/5/Playing-with-SVG-and-JavaScript) 。 
你 可 以 在 http://www.w3.org/TR/IndexedDB/ 找到 IndexedDB 规范 。 


然而 IndexedDB 并 不 是 一 个 文件 系统 ， 它 是 一 个 数据 库 API。 如 果 你 想 使 用 文件 系统 类 
的 API 来 存储 和 获取 用 户 计算 机 上 的 内 容 ， 你 很 幸运 ， 有 一 个 实验 性 的 API Ml FileSystem 
API (http:/www.w3.org/TR/file-system-api/)。 有 了 这 个 API，Web 应 用 就 能 在 用 户 硬盘 
上 读 取 和 写 入 文件 和 目录 层次 结构 。HTML5 Rocks 上 有 一 篇 优秀 的 教程 (http://www. 
html5rocks.com/en/tutorials/file/filesystem/)。 注意 FileSystem API 目 前 只 在 Opera 和 桌面 
Chrome 中 得 到 支持 。 另 外 注意 不 要 和 File API (http:/www.w3.org/TR/FileAPI/) 混淆 ， 它 
只 允许 读 取 本 地 文件 系统 。 
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作者 介绍 


Tony Parisi 是 一 位 企业 家 和 职业 CTO/ 架构 师 。 他 开发 了 国际 标准 和 协议 ， 创 造 了 卓越 的 
软件 产品 ， 并 创立 和 出 售 过 技术 公司 。Tony 对 创新 充满 热情 ， 但 他 渴望 为 广大 潜在 读者 带 
来 最 酷 和 最 有 趣 的 东西 。 

Tony 最 为 知名 的 应 该 是 他 是 Web 3D 标准 的 先驱 。 他 是 网 络 3D 图 形 IOS 标准 VRML 和 
X3D 的 联合 创造 者 。 他 还 联合 开发 了 SWMP,， 一 个 用 于 多 用 户 虚拟 世界 的 实时 消息 协议 。 
Tony 是 WebGL Meetup 的 联合 主席 及 Rest3D 工作 组 的 创始 人 ， 他 持续 构建 围绕 3D 创新 
的 社区 。 





Tony 现在 是 一 个 在 线 游戏 创业 公司 的 合伙 人 ， 同 时 还 为 旧金山 湾 区 的 客户 提供 开发 社交 游 
戏 、 虚 拟 世 界 和 基于 位 置 服务 的 技术 支持 。 


封面 介绍 


本 书 封 面 上 的 动物 是 麦 奎 因 大 鹅 ( 波 班 鹅 )， 一 种 生活 在 中 东 及 西南 亚 地 区 的 大 鸟 。 它 以 
将 军 托 马 斯 * 麦 奎 因 的 名 字 命 名 。 设 奎 因 是 19 世纪 的 一 名 英国 士兵 ， 驻 扎 在 印度 。 他 还 是 
自然 历史 标本 收藏 家 ， 并 向 大 英 博物 馆 捐 赠 了 他 射 下 的 一 只 大 鸥 ， 这 种 乌 于 1832 年 以 他 
的 名 字 命 名 。 


麦 奎 因 大 和 苞 在 干旱 沙 地 地 区 生存 和 繁殖 ， 以 种 子 、 植 物 芽 和 昆虫 为 食 。 一 般 长 2 英尺 ， 翼 
展 55 英寸 ， 肉 性 的 体型 稍 小 。 它 们 的 羽毛 是 浅 棕色 的 ， 脖 子 上 有 黑色 条 纹 ， 下 腹 为 白色 ， 
头 上 和 脖子 上 的 莲 松 羽毛 会 在 交配 的 时 候 呈 肩 形 散 开 。 它 们 不 常 发 出 叫 声 ， 在 地 面 打 洞 筑 
集 ， 每 次 生 2~4 个 蛋 。 

这 个 物种 〈 及 它 的 近亲 傅 领 移 ) 变 得 越 来 越 各 有， 它们 因 受 到 驯 座 者 的 欢迎 而 被 过 度 捕 
猫 。 虽 然 某 些 中 东 地 区 的 领导 ， 和 包括 沙特 阿拉 伯 及 阿 联 芮 王室， 都 在 近 些 年 对 这 种 鸟 类 采 
取 了 保护 措施 ， 但 它 依然 濒临 灭绝 。 


封面 图 片 来 自 约 翰 逊 的 Natural History。 
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延展 阅读 





全 新 解答 网 页 设计 经 典 难 题 ， 涵 盖 7 大 主题 、47 个 CSS 技巧 


全 彩印 刷 


Eric Meyer、Jeremy Keith 等 前 端 大 师 倾情 推荐 
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HTMLS 
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Em 在 本 书 中 ， 我 们 要 直面 当前 JavaScript 开 发 者 不 求 甚 解 的 大 趋势 ， 深 入 理解 语言 
msgwars | 部 的 机 制 。 本 书 既 适合 JavaScript 语 言 初学 者 阅读 ， 又 适合 经 验 丰富 的 JavaScript 
、 发 人 员 深 入 学 习 。 
你 不 知道 的 0 
JavaScript .» 
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车 = 二 天 网 络 时 代 ， 用 户 体验 的 重要 性 毋庸 置疑 ， 动 画 在 这 一 过 程 中 的 重要 性 也 明显 提升 。 
二 一 如 何在 不 分 散 用 户 注意 的 情况 下 达到 动画 设计 加 强 页 面目 的 的 效果 ， 已 经 成 为 优秀 


JavaScript 的 用 户 界面 设计 师 和 Web 开 发 人 员 孜 孜 以 求 的 目标 。 本 书 将 为 此 提供 必 备 的 知识 。 
网 页 动画 设计 






















































































































































































A\ 
『 重 


I 


书号 : 978-7-115-41012-2 
定价 : 39.00 元 





关注 图 灵 教 育 关注 图 灵 社 区 
iTuring.cn 


在 线 出 版 电子 书 《 码 农 》 杂 志 图 灵 访 谈 …… 


全 


QQ 联系 我 们 
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HTML5 与 WebGL 编 程 


本 书 介绍 如 何 使 用 HTML5 相 关 技 术 ， 如 CSS3 和 新 兴 的 Web 图 形 标准 
WebGL， 来 创建 具有 高 性 能 、 震 撼 视觉 效果 的 3D Web 应 用 。 书 中 内 容 分 
为 两 部 分 一 一 基础 知识 和 应 用 开发 技术 ， 不 但 提供 了 全 面 的 理论 介绍 ， 
还 包括 从 简单 3D 产 品 可 视 化 到 沉浸 式 游戏 及 交互 训练 系统 的 实践 ， 适 合 
转向 3D 开 发 的 Web 开 发 人 员 阅 读 。 


目 探索 HML5 API 及 创建 3D Web 图 形 的 相关 技术 ， 包 括 WebGL、 
Canvas 和 CSS 

国 使 用 流行 的 JavaScript 3D 泻 染 和 动画 库 Three.js 及 Tween.js 

加 研究 3D 内 容 创作 流程 ， 创 建 杀手 级 3D 内 容 的 建 模 和 动画 工具 

加 介绍 构建 3D 应 用 的 游戏 引擎 和 框架 ,包括 作者 的 Vizi 框 架 

四 使 用 示例 及 支持 代码 ， 创 建 有 多 个 物体 和 复杂 交互 的 3D 场 景 

加 分 析 移 动 浏览 器 中 的 WebGL 3D 应 用 会 遇 到 的 问题 


Tony Parisi，Web 3D 标 准 的 先驱 、 企 业 家 、CTO、 架 构 师 。VRML 和 X3D 语 


言 的 联合 作者 ， 这 两 者 已 经 成 为 Web 3D 图 形 的 ISO 标准 。 另 著 有 《WebGL 
入 门 指南 》。 
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在 现代 浏览 器 中 使 用 前 沿 3D 技 
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